阅读 771

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

原文链接:xtrp.io/blog/2020/0…

1. Clip Paths

Clip Paths 能把元素元素“裁剪”成特定形状,使用 CSS 提供的 polygoncircleellipse 等这些函数实现。举个例子:

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

Clip paths 可以通过两个属性实现:clip-pathbackground-clipclip-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 属性。

其他还可以可以使用的混合模式还有:screenmultiplyhard-lightdifference 等。更多可用的模式信息和效果可以 参考 MDN 上的文档

混合模式可以在所有的非 Edge 和 IE 的主流浏览器中使用。查看 CanIUse 数据

3. CSS Filters

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

例如:

img {
    filter: blur(10px);
}
复制代码

其他的 filter 函数还包括:sepiainvertgrayscale 等。

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

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

(正文完)


广告时间(长期有效)

我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个猫奴并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。

(完)

关注下面的标签,发现更多相似文章
评论