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

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

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

在任何你想要默認繼承color屬性值的地方都可以使用currentColor這一關鍵字。也會隨著color關鍵字的屬性值的改變，它會自動的通過規則反映在所有currentColor關鍵字使用的地方。

.box {

color: red;

border: 1px solid currentColor;

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

}

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

例如:

.box {

color: red;

}

.box .child-1 {

background: currentColor;

}

.box .child-2 {

color: currentColor;

border 1px solid currentColor;

}

在上面的代碼片段中，你可以看到我們不是在邊框、陰影上指定一個顏色，而是在這些屬性上使用了currentColor，這將使它們自動變為red。

簡化過渡和動畫

currentColor可以使transitions和animations變得更加簡單。所有使用currentColor 的屬性會自動在hover時發生改變。

在偽元素上使用

像是:before 和 :after 這樣的偽元素也同樣可以通過用 currentColor 來獲取它的父元素的值。這就可以用于創建帶有動態顏色的『提示框』，或是使用 body 顏色的『覆蓋層』，并給它一個半透明的效果。

.box {

color: red;

}

.box:before {

color: currentColor;

border: 1px solid currentColor;

}

在 SVG 中使用

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

svg {

fill: currentColor;

}

在漸變中使用

currentColor 可以同樣用于創建 CSS 漸變，其中漸變屬性的一部分可以被設置成父元素的 currentColor 。

.box {

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

}

CSS中currentColor屬性是從CSS3引入SVG規范時產生的，因此除了iE8和一些低版本的瀏覽器不支持，其余的都是支持的。雖然其沒有充分運用，但是使用后可以使代碼更加整潔。

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

成都網站建設公司_創新互聯，為您提供定制開發、外貿建站、搜索引擎優化、做網站、品牌網站建設、網站內鏈

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯