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ī)則反映在所有currentColor關(guān)鍵字使用的地方。
.box {
color: red;
border: 1px solid currentColor;
box-shadow: 0 0 2px 2px currentColor;
}
在上面的代碼片段里，并不是重復(fù)相同的color值，而是用currentColor來代替。這使CSS變得好控制，也不再需要在不同的地方來追蹤color值簡(jiǎn)化color定義。像鏈接，邊框，圖標(biāo)以及陰影等都可以通過簡(jiǎn)化的currentColor來替換一遍又一遍的特定color值;從而使代碼更加易于管理。
例如:
.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)化過渡和動(dòng)畫
currentColor可以使transitions和animations變得更加簡(jiǎn)單。所有使用currentColor 的屬性會(huì)自動(dòng)在hover時(shí)發(fā)生改變。
在偽元素上使用
像是:before 和 :after 這樣的偽元素也同樣可以通過用 currentColor 來獲取它的父元素的值。這就可以用于創(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和一些低版本的瀏覽器不支持，其余的都是支持的。雖然其沒有充分運(yùn)用，但是使用后可以使代碼更加整潔。
睿億網(wǎng)絡(luò)用心服務(wù)的團(tuán)隊(duì)，竭誠為您服務(wù) 
客服不能及時(shí)回復(fù)您，您可點(diǎn)擊QQ進(jìn)行交談 
