2 分钟搞定 3 个现代 CSS 特性

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 代码。

混合模式（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 数据。

CSS Filters

CSS 提供了大量的滤镜效果函数。

例如：

    img {
        filter: blur(10px);
    }

其他的 filter 函数还包括：sepia、invert、grayscale 等。

CSS 滤镜效果有多种用途。例如，我们可以使用 invert 过滤函数实现网站的暗色模式。

filter 属性可以在所有的非 IE 的主流浏览器中使用。查看 CanIUse 数据。