9 個(gè)有用又有趣的 CSS 屬性
英文 | https://javascript.plainenglish.io/9-awesome-css-properties-that-you-probably-have-never-used-8cc4c385c3c6
翻譯 | 楊小愛
如今，網(wǎng)絡(luò)上的每個(gè)網(wǎng)站或 Web 應(yīng)用程序都需要大量的 CSS 代碼來使事物看起來既漂亮又出眾。 我認(rèn)為如果不使用 CSS，我們將永遠(yuǎn)不會(huì)有一個(gè)可以脫穎而出的優(yōu)秀網(wǎng)頁設(shè)計(jì)。
CSS 是一種非常有用的樣式表語言，它主要用于實(shí)現(xiàn)網(wǎng)站或 Web 應(yīng)用程序設(shè)計(jì)的外觀。 通過使用CSS，我們可以輕松地設(shè)置網(wǎng)頁樣式，同時(shí)也能實(shí)現(xiàn)響應(yīng)式開發(fā)。
多年來，CSS 帶來了許多新功能，讓 Web 開發(fā)人員的生活更輕松。 例如Flexbox、Grid等有趣又有用的屬性功能。
近些年，CSS 又有了很大的改進(jìn)，總是有一些我們可能從未使用或聽說過的有趣而有用的新屬性。
因此，在今天的文章中，我想與您分享一些很多開發(fā)人員談?wù)摰挠杏们矣腥さ?CSS 屬性， 可能有的你從未使用過。
現(xiàn)在，就讓我們一起來了解一下。
1、clip-path 屬性
clip-path 非常有趣，它允許我們使用 CSS 創(chuàng)建不同類型的復(fù)雜形狀（橢圓、圓形、多邊形和其他不同的形狀）。
該屬性能夠通過定義應(yīng)顯示元素的哪些部分來創(chuàng)建復(fù)雜的形狀。 clip-path 可以采用不同的值，例如形狀函數(shù)和剪輯源。 您可以在 MDN 文檔上了解有關(guān)該屬性的更多信息。
以下是一個(gè)語法示例：
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);如果我們想使用屬性 clip-path 輕松創(chuàng)建復(fù)雜的形狀，我強(qiáng)烈建議使用名為 clip-path-maker 的工具。
它是 100% 免費(fèi)的，允許我們使用拖放功能創(chuàng)建形狀。 創(chuàng)建形狀后，該工具會(huì)自動(dòng)為我們生成 CSS 代碼。
在我們的視頻號(hào)上也有應(yīng)用clip-path 屬性的類似案例，具體如下：
2、writing-mode 屬性
CSS 的 writing-mode 屬性允許我們定義文本行是垂直還是水平布局。 除此之外，它還允許設(shè)置塊的前進(jìn)方向。
所有主流瀏覽器都支持該屬性，并且可以采用以下值：
horizontal-tb, vertical-rl, vertical-lr, sideways-rl, and sideways-lr以下是一個(gè)示例：
h1{writing-mode: vertical-lr;}h2{writing-mode: horizontal-tb;}
Codepen演示地址：https://codepen.io/MehdiAoussiad/pen/WNoYOEN
3、user-select 屬性
如果我們想阻止用戶突出顯示或選擇網(wǎng)頁上的文本，CSS 中的 user-select 屬性很有用。 該屬性定義是否可以選擇元素的文本。
因?yàn)槟J(rèn)情況下，當(dāng)您使用鼠標(biāo)雙擊文本時(shí)，它將被選中（突出顯示）。 屬性 user-select 可用于防止這種情況發(fā)生。
以下是一個(gè)示例：
div{user-select: none;}
4、object-fit 屬性
object-fit 屬性 允許我們?cè)O(shè)置或定義應(yīng)如何調(diào)整替換元素的內(nèi)容（img、video 等）以適應(yīng)其容器。
所有主要瀏覽器都支持此屬性。 它可以采用以下值：fill、contain、cover、scale-down 和 none。 如果你還想了解更多內(nèi)容的話，可以到 MDN 文檔（https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit）中去了解。
下面的代碼示例允許圖像保持其縱橫比并填充給定的尺寸。 圖像被剪裁以適合。
img{object-fit: cover;}
Codepen演示地址：https://codepen.io/MehdiAoussiad/pen/vYxedpK
5、backface-visibility 屬性
CSS 中的 backface-visibility 屬性設(shè)置當(dāng)轉(zhuǎn)向用戶時(shí)元素的背面是否可見。
在創(chuàng)建具有懸停效果的翻轉(zhuǎn)卡片時(shí)，通常會(huì)使用此屬性。 它可以采用以下兩個(gè)值之一：visible（可見）或hidden（隱藏）。
以下是一個(gè)示例：
div{backface-visibility: hidden;}
Codepen 演示地址：https://codepen.io/ananyaneogi/pen/Ezmyeb
6、 mix-blend-mode 屬性
CSS 的 mix-blend-mode 屬性是另一個(gè)很多人不熟悉的有用屬性， 甚至大多數(shù) Web 開發(fā)人員都不知道它。
因此，該屬性設(shè)置并定義了元素的內(nèi)容，應(yīng)如何與父元素的內(nèi)容及其背景混合。 讓我們簡(jiǎn)單地說它定義了一個(gè)元素和它背后的另一個(gè)元素之間的混合。
這個(gè)屬性有很多值，例如 normal 、 multiply 、 overlay 、 screen 等等。
以下是一個(gè)示例：
.parent img{position: absolute;}.parent h1 {mix-blend-mode: overlay;}
Codepen 演示地址：https://codepen.io/annafromduomly/pen/NWWdOPN
7、background-blend-mode 屬性
CSS 中的 background-blend-mode 屬性是另一個(gè)有用的混合模式屬性，它允許定義和設(shè)置元素的背景圖像和背景顏色之間的混合。
該屬性有許多值（正常、乘法、屏幕等），可讓我們?cè)O(shè)置不同的混合模式。 除舊版本外，所有主要瀏覽器都支持它。
看看下面的例子：
混合模式：正常
div{background: url("tree.png"), url("paper.png");background-blend-mode: normal;}
結(jié)果：
混合模式：疊加
div{background: url("tree.png"), url("paper.png");background-blend-mode: overlay;}
結(jié)果：
8、place-items 屬性
CSS 的place-items 屬性是 align-items 和 justify-items 兩個(gè)屬性的絕佳簡(jiǎn)寫。 它允許我們?cè)?Flexbox 或 Grid 等布局系統(tǒng)中輕松地在兩個(gè)方向（內(nèi)聯(lián)和塊）對(duì)齊元素。
該屬性可以一次取兩個(gè)值。 但如果我們只使用一個(gè)值，該值將自動(dòng)用作第二個(gè)值。 place-items 屬性可以采用以下值：center、start、end、stretch 等等。
以下是一個(gè)示例：
div{place-items: center stretch;}
9、resize 屬性
CSS 中的 resize 屬性允許用戶通過單擊并拖動(dòng)元素的右上角來調(diào)整網(wǎng)頁上元素的大小。 因此，它定義了用戶是否以及如何調(diào)整元素的大小。
該屬性通常用于 textarea 等元素，用戶可以輕松調(diào)整文本區(qū)域的大小以編寫長(zhǎng)格式文本。
有 4 個(gè)值可以與 resize 屬性一起使用：
vertical(垂直)：用戶可以垂直調(diào)整元素的大小。
horizontal (水平)：用戶可以水平調(diào)整元素的大小。
both：元素可以在兩個(gè)方向上調(diào)整大小。
none：元素不能調(diào)整大小。
以下是一個(gè)示例：
textarea{resize: none;}
寫在最后
正如你在上面的列表中看到的一樣，CSS 有很多有趣的屬性，許多開發(fā)人員不使用或不知道。 當(dāng)我們學(xué)習(xí)越來越多的 CSS 知識(shí)時(shí)，你就越會(huì)發(fā)現(xiàn)有很多東西要學(xué)。 CSS 是一種很棒的樣式表語言，它有很多我們可以用來讓 Web 更漂亮的特性， 我們只需要始終保持更新并不斷學(xué)習(xí)新事物。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
