英文 | https://javascript.plainenglish.io/9-awesome-css-properties-that-you-probably-have-never-used-8cc4c385c3c6

翻譯 | 楊小愛

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

如果我們想使用屬性 clip-path 輕松創(chuàng)建復(fù)雜的形狀，我強(qiáng)烈建議使用名為 clip-path-maker 的工具。它是 100% 免費的，允許我們使用拖放功能創(chuàng)建形狀。創(chuàng)建形狀后，該工具會自動為我們生成 CSS 代碼。

2、writing-mode 屬性

CSS writing-mode 屬性允許我們定義文本行是垂直還是水平布局。除此之外，它還允許設(shè)置塊的前進(jìn)方向。

所有主流瀏覽器都支持該屬性，并且可以采用以下值：

horizontal-tb, vertical-rl, vertical-lr, sideways-rl, and sideways-lr

這是一個代碼示例：

h1{  writing-mode: vertical-lr;}h2{  writing-mode: horizontal-tb;}

演示示例：https://codepen.io/MehdiAoussiad/pen/WNoYOEN

3、user-select 屬性

如果我們想阻止用戶突出顯示或選擇網(wǎng)頁上的文本，CSS 中的 user-select 屬性很有用。該屬性定義是否可以選擇元素的文本。

因為默認(rèn)情況下，當(dāng)我們使用鼠標(biāo)雙擊文本時，它將被選中（突出顯示）。屬性 user-select 可用于防止這種情況發(fā)生。

這是一個代碼示例：

div{ user-select: none;}

4、object-fit

屬性 object-fit 允許我們設(shè)置或定義應(yīng)如何調(diào)整替換元素的內(nèi)容（img、video 等）以適應(yīng)其容器。

所有主要瀏覽器都支持此屬性。它可以采用以下值：fill、contain、cover、scale-down 和 none。我們可以在 MDN 文檔中了解有關(guān)這些值的更多信息。

下面的代碼示例允許圖像保持其縱橫比并填充給定的尺寸。圖像被剪裁以適合。

看看下面的例子：

div{ backface-visibility: hidden;}

演示示例：https://codepen.io/MehdiAoussiad/pen/vYxedpK

5、backface-visibility 屬性

CSS 中的 backface-visibility 屬性設(shè)置元素的背面在面向用戶時是否可見。

在創(chuàng)建具有懸停效果的翻轉(zhuǎn)卡片時，通常會使用此屬性。它可以采用以下兩個值之一：visible 或者 hidden。

這是一個代碼示例：

div{ backface-visibility: hidden;}

演示示例：https://codepen.io/ananyaneogi/pen/Ezmyeb

6、mix-blend-mode 屬性

CSS mix-blend-mode 屬性是另一個沒有被人談?wù)撆c使用的屬性。大多數(shù) Web 開發(fā)人員甚至都不知道。

該屬性設(shè)置并定義了元素的內(nèi)容應(yīng)如何與父元素的內(nèi)容及其背景混合。讓我們簡單地說它定義了一個元素和它背后的另一個元素之間的混合。

這個屬性有很多值，例如 normal 、 multiply 、 overlay 、 screen 等等。

這是一個代碼示例：

.parent img{  position: absolute;}
.parent h1 {   mix-blend-mode: overlay;}

演示示例：https://codepen.io/annafromduomly/pen/NWWdOPN

7、background-blend-mode

CSS 中的 background-blend-mode是另一個有用的混合模式屬性，它允許定義和設(shè)置元素的背景圖像和背景顏色之間的混合。

該屬性有許多值（正常、乘法、屏幕等），可讓我們設(shè)置不同的混合模式。除舊版本外，所有主要瀏覽器都支持它。

看看下面的例子：

混合模式：正常

div{ background: url("tree.png"), url("paper.png"); background-blend-mode: normal;}

輸出：

混合模式：疊加

div{ background: url("tree.png"), url("paper.png"); background-blend-mode: overlay;}

輸出：

8、place-items屬性

CSS place-items 屬性是 align-items 和 justify-items 兩個屬性的絕佳簡寫。 它允許我們在 Flexbox 或 Grid 等布局系統(tǒng)中輕松地在兩個方向（內(nèi)聯(lián)和塊）對齊元素。

該屬性可以一次取兩個值。 但如果我們只使用一個值，該值將自動用作第二個值。place-items 屬性可以采用以下值：center、start、end、stretch 等等。

這是一個代碼示例：

div{ place-items: center stretch;}

9、resize屬性

CSS 中的 resize 屬性允許用戶通過單擊并拖動元素的右上角來調(diào)整網(wǎng)頁上元素的大小。 因此，它定義了用戶是否以及如何調(diào)整元素的大小。

該屬性通常用于 textarea 等元素，用戶可以輕松調(diào)整文本區(qū)域的大小以編寫長格式文本。

有 4 個值可以與 resize 屬性一起使用：

• vertical：用戶可以垂直調(diào)整元素的大小。

• horizontal：用戶可以水平調(diào)整元素的大小。

• both：元素可以在兩個方向上調(diào)整大小。

• none：元素不能調(diào)整大小。

這是一個代碼示例：

textarea{ resize: none;}

總結(jié)

正如我們在上面的示例中看到的那樣，CSS 有很多有趣的屬性，許多開發(fā)人員不使用或不知道。 我們學(xué)習(xí) CSS 越多，我們就越會發(fā)現(xiàn)有很多東西要學(xué)。

CSS 是一種很棒的樣式表語言，它有很多我們可以用來讓 Web 變得更漂亮的特性。 我們需要始終保持更新并不斷學(xué)習(xí)新事物的精神。

學(xué)習(xí)更多技能

請點擊下方公眾號