zwf193071的专栏

前言有个布局需求：父级容器， class为szb-left-menu，里面有三个div，希望能实现下图的排列效果：如何用flex实现类似的效果呢？代码话不多说，父级容器的样式代码如下所示：.szb-left-menu { position: absolute; z-index: 9999; top: 100px; left: 28px; height: calc(100% - 150px); display: flex; flex-flow

前提假设，你有一个类元素，拥有多个css属性值，如下所示：.el { transform: translate(100px) scale(1.5) skew(5deg);}有时，你并不想使用所有的transform值，你希望有些属性值是可选的，此时你可能会想到varvar使用var定义可选属性值.el { /* |-- default ---| |-- optional --| */ transform: translate(100px) var(--transf

前言需要实现下图的效果，多个元素水平垂直居中，如下所示：使用flex可轻松实现上图效果源码html代码如下所示： <div class="sfui-empty"> <img src="./assets/lost.png"/> <p>哎呀，页面丢失</p> <a href="javascript:location.reload();">重新加载</a> </div&gt

如何绘制下图的边框渐变效果代码如下 border: 1px solid; border-image: linear-gradient( 135deg, rgba(25, 71, 255, 0.8) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(0, 255, 248, 0.8) 100% ) 1;...

配置manifest.json文件{ "name": "EyeProtection", "version": "1.0", "description": "保护视力的chrome插件", "content_scripts": [ { "matches": ["https://*.com/*","https://*.net/*", "https://*.cn/*", "https://*.dev/*", "https://*.io/*"

最开始想基于现有的vue项目，插入自动化测试功能，主要是防止后台改了接口参数却没有告知前端的问题。预想的是jest功能，安装了vue-jest等包工具后，跑起test，发现一堆报错，去官网查了下，发现下面这句话：vue-jest 目前并不支持 vue-loader 所有的功能，比如自定义块和样式加载。额外的，诸如代码分隔等 webpack 特有的功能也是不支持的。如果要使用这些不支持的特...

.circle{position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; width: 300px; height: 300px; border: 1px solid #333; border-radius: 50%;} .circle .c-circle{ width: 100%;

VUE+webpack