css将网页变成黑白色
方法1:css滤镜样式
css-filter
直接在目标文件样式style写入代码
filter: grayscale(100%);
方法二:使用css滤镜svg版本
步骤一:创建一个svg文件,grayscale.svg。文件内容如下:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
步骤二:在目标文件样式引入svg文件样式
filter: url(grayscale.svg#grayscale);
tips:注意在使用filter属性的时候会导致flex属性失效。这是因为filter会导致祖先的视图层层级发生改变,处理方法:我们可以把filter属性添加到html上面或者加在单个容器的上面
:empty 选择器
css-:empty
:empty选择器选择每个没有任何子级的元素(包括文本节点)。
我们常常会遇到这样的场景,在渲染一个列表时,当数据为空时需要给用户展示一个暂无数据的样式,用于提示用户。在vue中我们常用的方式为使用v-if判断list.length是否为0,如果为0则展示无数据提示;却很少发现在css中我们也可以使用选择器完成。
&:empty::after {
content: "暂无数据";
}
tips: 适合纯文字类的,如果比较复杂还是建议使用v-if判断
网格布局法,gap 设置网格行与列之间的间隙
css-grid
在页面排版布局的时候,我们会遇到常见的排版,例如:展示三行数据,每行间距10px;此时我们会常使用padding或者margin来处理。
其实在css3中,我们也可以使用网格布局法,在使用gap来设置间隙。
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px 20px;
}
制作渐变字体
background: linear-gradient(360deg, #FFFFFF 0%, rgba(246,255,248,0.5) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;