免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

如何使用currentColor屬性寫出更好的CSS代碼?

2024-01-10    分類: 網(wǎng)站建設(shè)

CSS屬性比較多,但是有一些很少被技術(shù)人員使用,雖然這些屬性目前已被瀏覽器支持,而currentColor就是屬性之一,現(xiàn)在我們和成都網(wǎng)站建設(shè)小編一起了解一下吧!

currentColor代表了當(dāng)前元素被應(yīng)用上的color顏色值。它允許讓繼承自屬性或子元素屬性的color屬性為默認(rèn)值而不再繼承。而其關(guān)鍵字按某種規(guī)則獲取了color屬性的值并賦值給了自身。

在任何你想要默認(rèn)繼承color屬性值的地方都可以使用currentColor這一關(guān)鍵字。也會(huì)隨著color關(guān)鍵字的屬性值的改變,它會(huì)自動(dòng)的通過(guò)規(guī)則反映在所有currentColor關(guān)鍵字使用的地方。

.box {

color: red;

border: 1px solid currentColor;

box-shadow: 0 0 2px 2px currentColor;

}

在上面的代碼片段里,并不是重復(fù)相同的color值,而是用currentColor來(lái)代替。這使CSS變得好控制,也不再需要在不同的地方來(lái)追蹤color值簡(jiǎn)化color定義。像鏈接,邊框,圖標(biāo)以及陰影等都可以通過(guò)簡(jiǎn)化的currentColor來(lái)替換一遍又一遍的特定color值;從而使代碼更加易于管理。

成都網(wǎng)站建設(shè)

例如:

.box {

color: red;

}

.box .child-1 {

background: currentColor;

}

.box .child-2 {

color: currentColor;

border 1px solid currentColor;

}

在上面的代碼片段中,你可以看到我們不是在邊框、陰影上指定一個(gè)顏色,而是在這些屬性上使用了currentColor,這將使它們自動(dòng)變?yōu)閞ed。

簡(jiǎn)化過(guò)渡和動(dòng)畫

currentColor可以使transitions和animations變得更加簡(jiǎn)單。所有使用currentColor 的屬性會(huì)自動(dòng)在hover時(shí)發(fā)生改變。

在偽元素上使用

像是:before 和 :after 這樣的偽元素也同樣可以通過(guò)用 currentColor 來(lái)獲取它的父元素的值。這就可以用于創(chuàng)建帶有動(dòng)態(tài)顏色的『提示框』,或是使用 body 顏色的『覆蓋層』,并給它一個(gè)半透明的效果。

.box {

color: red;

}

.box:before {

color: currentColor;

border: 1px solid currentColor;

}

在 SVG 中使用

SVG 中 currentColor 的值同樣可以從父元素中獲取。當(dāng)你在不同地方應(yīng)用 SVG 并想從父元素中繼承 color 值而又不想每次明確提及時(shí),使用它是相當(dāng)有幫助的。

svg {

fill: currentColor;

}

在漸變中使用

currentColor 可以同樣用于創(chuàng)建 CSS 漸變,其中漸變屬性的一部分可以被設(shè)置成父元素的 currentColor 。

.box {

background: linear-gradient(top bottom right, currentColor, #FFFFFF);

}

CSS中currentColor屬性是從CSS3引入SVG規(guī)范時(shí)產(chǎn)生的,因此除了iE8和一些低版本的瀏覽器不支持,其余的都是支持的。雖然其沒(méi)有充分運(yùn)用,但是使用后可以使代碼更加整潔。

本文題目:如何使用currentColor屬性寫出更好的CSS代碼?
當(dāng)前URL:http://m.newbst.com/news29/312979.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開(kāi)發(fā)外貿(mào)建站搜索引擎優(yōu)化做網(wǎng)站品牌網(wǎng)站建設(shè)網(wǎng)站內(nèi)鏈

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)