英文 | https://javascript.plainenglish.io/9-awesome-css-properties-that-you-probably-have-never-used-8cc4c385c3c6
翻譯 | 楊小愛
如今，網絡上的每個網站或 Web 應用程式都需要大量的 CSS 代碼來裝飾它們，這樣可以使網站看起來既漂亮又出衆。我個人認為如果不使用 CSS，我們将永遠不會有一個可以幫助我們脫穎而出的優秀網頁設計。
CSS 是一種非常有用的樣式表語言，它允許我們描述網站或 Web 應用程式設計的外觀。我們可以輕松地設定網頁樣式并使它們在所有裝置上都能完全響應。
多年來，CSS 帶來了許多新功能和屬性，讓作為 Web 開發人員的我們生活更輕松，像Flexbox、Grid、新的有趣屬性等等。CSS 在過去幾年裡有了很大的改進，總是有一些我們可能從未使用或聽說過的有趣的新屬性。
這就是為什麼在本文中，我想與您分享一些我沒有看到很多開發人員談論的有用且有趣的 CSS 屬性。我們中的一些人可能從未使用過它們。是以，讓我們現在檢查一下。
1、clip-path屬性
clip-path 屬性非常有趣，它允許我們使用 CSS 建立不同類型的複雜形狀（橢圓、圓形、多邊形和其他不同的形狀）。
該屬性可以幫助我們通過定義顯示元素的哪些部分來建立複雜的形狀。clip-path 可以采用不同的值，例如形狀函數和剪輯源。我們可以在 MDN 文檔上了解有關該屬性的更多資訊。
這是一個代碼文法示例：
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 如果我們想使用屬性 clip-path 輕松建立複雜的形狀，我強烈建議使用名為 clip-path-maker 的工具。它是 100% 免費的，允許我們使用拖放功能建立形狀。建立形狀後，該工具會自動為我們生成 CSS 代碼。
2、writing-mode 屬性
CSS writing-mode 屬性允許我們定義文本行是垂直還是水準布局。除此之外，它還允許設定塊的前進方向。
所有主流浏覽器都支援該屬性，并且可以采用以下值：
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 屬性
如果我們想阻止使用者突出顯示或選擇網頁上的文本，CSS 中的 user-select 屬性很有用。該屬性定義是否可以選擇元素的文本。
因為預設情況下，當我們使用滑鼠輕按兩下文本時，它将被選中（突出顯示）。屬性 user-select 可用于防止這種情況發生。
這是一個代碼示例：
div{
user-select: none;
} 4、object-fit
屬性 object-fit 允許我們設定或定義應如何調整替換元素的内容（img、video 等）以适應其容器。
所有主要浏覽器都支援此屬性。它可以采用以下值：fill、contain、cover、scale-down 和 none。我們可以在 MDN 文檔中了解有關這些值的更多資訊。
下面的代碼示例允許圖像保持其縱橫比并填充給定的尺寸。圖像被剪裁以适合。
看看下面的例子：
div{
backface-visibility: hidden;
} 示範示例：https://codepen.io/MehdiAoussiad/pen/vYxedpK
5、backface-visibility 屬性
CSS 中的 backface-visibility 屬性設定元素的背面在面向使用者時是否可見。
在建立具有懸停效果的翻轉卡片時，通常會使用此屬性。它可以采用以下兩個值之一：visible 或者 hidden。
這是一個代碼示例：
div{
backface-visibility: hidden;
} 示範示例：https://codepen.io/ananyaneogi/pen/Ezmyeb
6、mix-blend-mode 屬性
CSS mix-blend-mode 屬性是另一個沒有被人談論與使用的屬性。大多數 Web 開發人員甚至都不知道。
該屬性設定并定義了元素的内容應如何與父元素的内容及其背景混合。讓我們簡單地說它定義了一個元素和它背後的另一個元素之間的混合。
這個屬性有很多值，例如 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是另一個有用的混合模式屬性，它允許定義和設定元素的背景圖像和背景顔色之間的混合。
該屬性有許多值（正常、乘法、螢幕等），可讓我們設定不同的混合模式。除舊版本外，所有主要浏覽器都支援它。
看看下面的例子：
混合模式：正常
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 等布局系統中輕松地在兩個方向（内聯和塊）對齊元素。
該屬性可以一次取兩個值。 但如果我們隻使用一個值，該值将自動用作第二個值。place-items 屬性可以采用以下值：center、start、end、stretch 等等。
這是一個代碼示例：
div{
place-items: center stretch;
} 9、resize屬性
CSS 中的 resize 屬性允許使用者通過單擊并拖動元素的右上角來調整網頁上元素的大小。 是以，它定義了使用者是否以及如何調整元素的大小。
該屬性通常用于 textarea 等元素，使用者可以輕松調整文本區域的大小以編寫長格式文本。
有 4 個值可以與 resize 屬性一起使用：
- vertical：使用者可以垂直調整元素的大小。
- horizontal：使用者可以水準調整元素的大小。
- both：元素可以在兩個方向上調整大小。
- none：元素不能調整大小。
這是一個代碼示例：
textarea{
resize: none;
} 總結
正如我們在上面的示例中看到的那樣，CSS 有很多有趣的屬性，許多開發人員不使用或不知道。 我們學習 CSS 越多，我們就越會發現有很多東西要學。
CSS 是一種很棒的樣式表語言，它有很多我們可以用來讓 Web 變得更漂亮的特性。 我們需要始終保持更新并不斷學習新事物的精神。
學習更多技能
請點選下方公衆号