css让网页更有趣

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;