跳到主要内容

CSS奇淫技巧

前言​

学习 CSS 特性能够帮助我们更方便地实现自己的需求，本文介绍了一些有趣的技巧，如果您需要更多的学习资源和示例代码，具体可查看 mdn

同时，您可以通过网站 Can I use查询 CSS 特性的兼容性情况。

clip-path​

在过去，为了实现多边形，通常需要使用 border，但这种方法不仅逻辑复杂，而且难以控制。幸运的是，clip-path 属性提供了一种使用裁剪方式创建可显示区域的方法。可以使用 Clippy — CSS clip-path 生成器拖动勾绘需要的图形，然后添加到 CSS 属性中即可。

linear-gradient​

线性渐变颜色，也是渐变色用到最多的一个属性，此外还有径向 radial-gradient与圆锥conic-gradient 以下是一些 linear-gradient 的示例：

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度 40% 位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

不过这个属性只适用于背景(background)颜色，如果想要在文字，边框，阴影中使用渐变颜色，通常需要先设置渐变背景颜色，然后通过一些 css 属性“裁剪”出相应的部分。例如，可以使用 background-clip 属性将渐变应用到相应的位置上，例如 background-clip: text 可以裁剪出文本，同时也需要将文本颜色设置为 transparent，如果想要裁剪出边框，则可以使用 background-clip: content-box, border-box;。此外还需要添加原背景色。

backdrop-filter​

backdrop-filter 属性可以为元素背后的区域添加图形特效，例如模糊或颜色偏移。由于它适用于元素背后的所有元素，为了能够看到效果，必须将元素或其背景至少部分设为透明。

可以通过添加滤镜来为背景添加效果，例如毛玻璃效果可以使用 backdrop-filter: blur(5px);，灰度效果可以使用 backdrop-filter: grayscale(1); 等等。再次之前要实现这类效果还需要使用filter属性（兼容性更好），然后用伪元素双背景的方式来实现，实在过于麻烦。

-webkit-box-reflect

可以实现类似水下倒影的效果，例如

-webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));

aspect-ratio​

aspect-ratio 属性可以帮助我们设置元素的宽高比例如

aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 4 / 3;

gap​

这个属性我经常用到，主要用于 flex 与 grid 布局中用于设置元素间的间隔，原本这个属性是只有 grid 布局中才有的，后来在 flex 布局中也可以使用。

writing-mode​

writing-mode 属性可以帮助我们修改文字的显示方向，例如竖向显示可以使用 writing-mode: vertical-lr;。

img

总结​

此外还有很多特性也在不断了解，每年也会有一些新的特性来帮助开发者更好的使用 css 去美化网站。

最直接的体验就是到 CSS（层叠样式表） | MDN ，在 MDN 上能查到关于前端开发技术的文档，可以说是前端的百科全书了。