两分钟了解 3 个现代 CSS 特性

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

标题假设阅读速度约为每分钟 275 字，与DEV.to上的阅读速度相同。

1. 裁剪路径

裁剪路径允许您将元素“裁剪”成特定形状，在 CSS 中用 `<p>` polygon、 `<p> circle` 或ellipse`<p>` 函数表示。例如：

div {
    background-image: url(background.jpg);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

裁剪路径可以通过clip-path属性来裁剪元素内容，也可以background-clip通过属性来裁剪元素背景。

CSSpolygon函数是裁剪中最常用的函数之一，它由一个点（顶点）列表组成。每个点都写成x y.

例如：0 0表示左上角，而100% 100%表示右下角。上面的例子使用了右下角的一个点，但该点并未完全位于底部（仅位于底部的 85%），从而产生了对角线效果。

裁剪路径在扁平化设计中尤其受欢迎，可以用来创建倾斜区域，如示例所示。我在个人网站上使用这种方法来突出某些页面中的背景图片。

除 Edge 和 IE 外，所有主流浏览器均支持基本剪辑路径用法：请参阅CanIUse Data for Clip Paths。

您可以自己创建剪切路径，也可以使用Clippy等工具自动为您生成剪切路径 CSS。

2. 混合模式

混合模式允许您使用特定方法将元素的内容与其父元素或其背景混合。

假设你想在背景图像上叠加一层黄色。通常情况下：

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、、、、等等。有关可能的混合模式及其效果的更多信息，请参阅MDNmultiply网络文档。hard-lightdifference

除 Edge 和 IE 外，所有主流浏览器均支持混合模式：请参阅CanIUse Data for Background Blend Modes。

3. CSS过滤器

CSS 过滤器提供了丰富的选项，可用于以可视化的方式筛选元素。例如：

img {
    filter: blur(10px);
}

其他筛选条件包括：sepia，，，invert等等grayscale。

CSS 滤镜用途广泛，例如：CSS 滤镜在使用该invert滤镜的网站上创建暗黑模式效果方面非常流行。

filter除 IE 外，所有主流浏览器均支持该属性：请参阅CanIUse Data for CSS Filters。

感谢阅读！

希望您喜欢这篇文章，并觉得文中提到的一些 CSS 功能很有用。

感谢您的浏览。

— 加布里埃尔·罗穆阿尔多，2020 年 1 月 3 日