9個有用又有趣的CSS屬性
如今，網(wǎng)絡上的每個網(wǎng)站或 Web 應用程序都需要大量的 CSS 代碼來使事物看起來既漂亮又出眾。我認為如果不使用 CSS，我們將永遠不會有一個可以脫穎而出的優(yōu)秀網(wǎng)頁設計。
CSS 是一種非常有用的樣式表語言，它主要用于實現(xiàn)網(wǎng)站或 Web 應用程序設計的外觀。通過使用CSS，我們可以輕松地設置網(wǎng)頁樣式，同時也能實現(xiàn)響應式開發(fā)。
多年來，CSS 帶來了許多新功能，讓 Web 開發(fā)人員的生活更輕松。例如Flexbox、Grid等有趣又有用的屬性功能。
近些年，CSS 又有了很大的改進，總是有一些我們可能從未使用或聽說過的有趣而有用的新屬性。
因此，在今天的文章中，我想與您分享一些很多開發(fā)人員談論的有用且有趣的 CSS 屬性， 可能有的你從未使用過。
現(xiàn)在，就讓我們一起來了解一下。
1、clip-path 屬性
clip-path 非常有趣，它允許我們使用 CSS 創(chuàng)建不同類型的復雜形狀（橢圓、圓形、多邊形和其他不同的形狀）。
該屬性能夠通過定義應顯示元素的哪些部分來創(chuàng)建復雜的形狀。clip-path 可以采用不同的值，例如形狀函數(shù)和剪輯源。您可以在 MDN 文檔上了解有關該屬性的更多信息。
以下是一個語法示例：
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
如果我們想使用屬性 clip-path 輕松創(chuàng)建復雜的形狀，我強烈建議使用名為 clip-path-maker 的工具。
它是 100% 免費的，允許我們使用拖放功能創(chuàng)建形狀。創(chuàng)建形狀后，該工具會自動為我們生成 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;
}
Codepen演示地址：https://codepen.io/MehdiAoussiad/pen/WNoYOEN
3、user-select 屬性
如果我們想阻止用戶突出顯示或選擇網(wǎng)頁上的文本，CSS 中的 user-select 屬性很有用。該屬性定義是否可以選擇元素的文本。
因為默認情況下，當您使用鼠標雙擊文本時，它將被選中（突出顯示）。屬性 user-select 可用于防止這種情況發(fā)生。
以下是一個示例：
div{
user-select: none;
}
4、object-fit 屬性
object-fit 屬性 允許我們設置或定義應如何調(diào)整替換元素的內(nèi)容（img、video 等）以適應其容器。
所有主要瀏覽器都支持此屬性。它可以采用以下值：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 屬性設置當轉(zhuǎn)向用戶時元素的背面是否可見。
在創(chuàng)建具有懸停效果的翻轉(zhuǎn)卡片時，通常會使用此屬性。它可以采用以下兩個值之一：visible（可見）或hidden（隱藏）。
以下是一個示例：
div{
backface-visibility: hidden;
}
Codepen 演示地址：https://codepen.io/ananyaneogi/pen/Ezmyeb
6、 mix-blend-mode 屬性
CSS 的 mix-blend-mode 屬性是另一個很多人不熟悉的有用屬性， 甚至大多數(shù) Web 開發(fā)人員都不知道它。
因此，該屬性設置并定義了元素的內(nèi)容，應如何與父元素的內(nèi)容及其背景混合。讓我們簡單地說它定義了一個元素和它背后的另一個元素之間的混合。
這個屬性有很多值，例如 normal 、 multiply 、 overlay 、 screen 等等。
以下是一個示例：
.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 屬性是另一個有用的混合模式屬性，它允許定義和設置元素的背景圖像和背景顏色之間的混合。
該屬性有許多值（正常、乘法、屏幕等），可讓我們設置不同的混合模式。除舊版本外，所有主要瀏覽器都支持它。
看看下面的例子：
混合模式：正常
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 兩個屬性的絕佳簡寫。它允許我們在 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;
}
寫在最后
正如你在上面的列表中看到的一樣，CSS 有很多有趣的屬性，許多開發(fā)人員不使用或不知道。當我們學習越來越多的 CSS 知識時，你就越會發(fā)現(xiàn)有很多東西要學。CSS 是一種很棒的樣式表語言，它有很多我們可以用來讓 Web 更漂亮的特性， 我們只需要始終保持更新并不斷學習新事物。
往期干貨：
26個經(jīng)典微信小程序+35套微信小程序源碼+微信小程序合集源碼下載（免費）
干貨~~~2021最新前端學習視頻~~速度領取
前端書籍-前端290本高清pdf電子書打包下載
點贊和在看就是最大的支持??