[譯] 2 分鐘搞定 3 個現代 CSS 特性

原文連接：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 數據。

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個貓奴而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）