建站
咨詢
售后
建站咨詢
新聞中心
如今，網(wǎng)絡(luò)上的每個(gè)網(wǎng)站或 Web 應(yīng)用程序都需要大量的 CSS 代碼來(lái)使事物看起來(lái)既漂亮又出眾。 我認(rèn)為如果不使用 CSS，我們將永遠(yuǎn)不會(huì)有一個(gè)可以脫穎而出的優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)。
CSS 是一種非常有用的樣式表語(yǔ)言，它主要用于實(shí)現(xiàn)網(wǎng)站或 Web 應(yīng)用程序設(shè)計(jì)的外觀。 通過(guò)使用CSS，我們可以輕松地設(shè)置網(wǎng)頁(yè)樣式，同時(shí)也能實(shí)現(xiàn)響應(yīng)式開(kāi)發(fā)。
多年來(lái)，CSS 帶來(lái)了許多新功能，讓 Web 開(kāi)發(fā)人員的生活更輕松。 例如Flexbox、Grid等有趣又有用的屬性功能。
近些年，CSS 又有了很大的改進(jìn)，總是有一些我們可能從未使用或聽(tīng)說(shuō)過(guò)的有趣而有用的新屬性。
因此，在今天的文章中，我想與您分享一些很多開(kāi)發(fā)人員談?wù)摰挠杏们矣腥さ?CSS 屬性， 可能有的你從未使用過(guò)。
現(xiàn)在，就讓我們一起來(lái)了解一下。
1、clip-path 屬性
clip-path 非常有趣，它允許我們使用 CSS 創(chuàng)建不同類(lèi)型的復(fù)雜形狀（橢圓、圓形、多邊形和其他不同的形狀）。
該屬性能夠通過(guò)定義應(yīng)顯示元素的哪些部分來(lái)創(chuàng)建復(fù)雜的形狀。 clip-path 可以采用不同的值，例如形狀函數(shù)和剪輯源。 您可以在 MDN 文檔上了解有關(guān)該屬性的更多信息。
以下是一個(gè)語(yǔ)法示例：
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 代碼。
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)頁(yè)上的文本，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í)元素的背面是否可見(jiàn)。
在創(chuàng)建具有懸停效果的翻轉(zhuǎn)卡片時(shí)，通常會(huì)使用此屬性。 它可以采用以下兩個(gè)值之一：visible（可見(jiàn)）或hidden（隱藏）。
以下是一個(gè)示例：
div{
backface-visibility: hidden;
}Codepen 演示地址：https://codepen.io/ananyaneogi/pen/Ezmyeb
6、 mix-blend-mode 屬性
CSS 的 mix-blend-mode 屬性是另一個(gè)很多人不熟悉的有用屬性， 甚至大多數(shù) Web 開(kāi)發(fā)人員都不知道它。
因此，該屬性設(shè)置并定義了元素的內(nèi)容，應(yīng)如何與父元素的內(nèi)容及其背景混合。 讓我們簡(jiǎn)單地說(shuō)它定義了一個(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)寫(xiě)。 它允許我們?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 屬性允許用戶通過(guò)單擊并拖動(dòng)元素的右上角來(lái)調(diào)整網(wǎng)頁(yè)上元素的大小。 因此，它定義了用戶是否以及如何調(diào)整元素的大小。
該屬性通常用于 textarea 等元素，用戶可以輕松調(diào)整文本區(qū)域的大小以編寫(xiě)長(zhǎng)格式文本。
有 4 個(gè)值可以與 resize 屬性一起使用：
- vertical(垂直)：用戶可以垂直調(diào)整元素的大小。
- horizontal (水平)：用戶可以水平調(diào)整元素的大小。
- both：元素可以在兩個(gè)方向上調(diào)整大小。
- none：元素不能調(diào)整大小。
以下是一個(gè)示例：
textarea{
resize: none;
}寫(xiě)在最后
正如你在上面的列表中看到的一樣，CSS 有很多有趣的屬性，許多開(kāi)發(fā)人員不使用或不知道。 當(dāng)我們學(xué)習(xí)越來(lái)越多的 CSS 知識(shí)時(shí)，你就越會(huì)發(fā)現(xiàn)有很多東西要學(xué)。 CSS 是一種很棒的樣式表語(yǔ)言，它有很多我們可以用來(lái)讓 Web 更漂亮的特性， 我們只需要始終保持更新并不斷學(xué)習(xí)新事物。
網(wǎng)站欄目：九個(gè)有用又有趣的 CSS 屬性
本文網(wǎng)址：http://www.dlmjj.cn/article/dhpicoe.html
