原文链接：xtrp.io/blog/2020/0…
1. Clip Paths
Clip Paths 能把元素元素“裁剪”成特定形状，使用 CSS 提供的 polygon、circle、ellipse 等这些函数实现。举个例子：
div {
background-image: url(background.jpg);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
Clip paths 可以通过两个属性实现：clip-path 和 background-clip。clip-path 裁剪的是元素内容，background-clip 则是裁剪元素背景。
功能函数 polygon 是最经常使用的裁剪函数之一，由一系列的点（顶点）组成。每个点都写作 x y。
举个例子：0 0 表示左上角，100% 100% 则表示右下角。上例中的有一个靠近右下角的点，但没有完全在下面（只是 85%），就组成了一个对角线效果。
Clip paths 在平面设计中特别流行，用来创建倾斜区域（跟上例中的效果一样）。我在我的个人网站 xtrp.io上使用它，来吸引用户注意某些页面上的背景图像。
基本的 clip-path 属性，已经可以在所有的主流浏览器中使用了（除了 Edge 和 IE）。查看 CanIUse 数据。
你可以创建自己的 Clip paths，或者你可以使用像 Clippy 这样的工具自动生成 CSS Clip paths 代码。
2. 混合模式（Blend Modes）
混合模式允许使用特定函数，将一个元素的内容与父元素和它的背景做混合。
假设，你想要在背景图片上加一个黄色的覆盖层。通常看起来是这样的：
div {
background-image: linear-gradient(yellow, yellow)), url(background.jpg);
}
上面这个结果，只是简单把黄色和图片组合在了一起。然而，这只是简单的叠加，而不是把把黄色混入到了图片里。实现这个效果，我们需要使用称为 screen 的混合模式：
div {
background-image: linear-gradient(yellow, yellow)), url(background.jpg);
background-blend-mode: screen;
}
特定于元素背景的混合使用 background-blend-mode 属性；特定于元素内容与其背景和父元素的混合使用 mix-blend-mode 属性。
其他还可以可以使用的混合模式还有：screen、multiply、hard-light、difference 等。更多可用的模式信息和效果可以 参考 MDN 上的文档。
混合模式可以在所有的非 Edge 和 IE 的主流浏览器中使用。查看 CanIUse 数据。
3. CSS Filters
CSS 提供了大量的滤镜效果函数。
例如：
img {
filter: blur(10px);
}
其他的 filter 函数还包括：sepia、invert、grayscale 等。
CSS 滤镜效果有多种用途。例如，我们可以使用 invert 过滤函数实现网站的暗色模式。
filter 属性可以在所有的非 IE 的主流浏览器中使用。查看 CanIUse 数据。
（正文完）
广告时间（长期有效）
我有一位好朋友开了一间猫舍，在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个猫奴并且有需要的话，不妨扫一扫她的【闲鱼】二维码。不买也不要紧，看看也行。
（完）
