CSS中currentColor關(guān)鍵字如何使用

這篇文章給大家介紹CSS中currentColor關(guān)鍵字如何使用，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

一、currentColor-真正大隱于市者

實(shí)際上，之前“SVG圖標(biāo)顏色文字般繼承與填充”一文就簡(jiǎn)單介紹過(guò)currentColor, 后來(lái)有同事問(wèn)此關(guān)鍵字，說(shuō)沒(méi)見(jiàn)過(guò)。我意識(shí)到，應(yīng)該好好大家宣揚(yáng)currentColor一番。

currentColor顧名思意就是“當(dāng)前顏色”，準(zhǔn)確講應(yīng)該是“當(dāng)前的文字顏色”，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .xxx { border: 1px solid currentColor; }   

沒(méi)錯(cuò)!再說(shuō)一遍，沒(méi)錯(cuò)！就是這么一個(gè)長(zhǎng)得很不和諧的單詞就是CSS3中一個(gè)標(biāo)準(zhǔn)且重要且強(qiáng)大的關(guān)鍵字。

什么？你沒(méi)見(jiàn)過(guò)??！孤陋寡聞了吧~~過(guò)來(lái)~~來(lái)嘛~~只告訴你一個(gè)人哦，鄙人其實(shí)……已經(jīng)使用有一段時(shí)日了，超贊的！

沒(méi)事沒(méi)事，別慌，現(xiàn)在開(kāi)始認(rèn)識(shí)還來(lái)得急，也會(huì)讓你爽滴！
二、currentColor的使用與表現(xiàn)

上面提到，currentColor表示“當(dāng)前的標(biāo)簽所繼承的文字顏色”?？赡苓€有小伙伴一時(shí)半會(huì)沒(méi)消化過(guò)來(lái)，炒兩個(gè)簡(jiǎn)單板栗助消化，CSS代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. img[src$='mm1.jpg'] { border: 1em solid currentColor; }  

于是，如果御用妹子直接暴露在本文中，妹子邊框顏色就會(huì)是文章默認(rèn)文字顏色，如下這樣子：

我的鑫空間<pre>標(biāo)簽文字顏色是藍(lán)色(pre { color: blue; })，于是，我把御用妹子放在<pre>標(biāo)簽中，則邊框則是藍(lán)色，如下：

注意：由于是CSS3新增關(guān)鍵字，需要IE9+以及其他現(xiàn)代瀏覽器才有效果。

換種方式表示就是：currentColor = color的值

用圖示意是：

任意替換性
凡事需要使用顏色值的地方，都可以使用currentColor替換，比方說(shuō)背景色 &ndash; background-color, 漸變色 &ndash; gradient, 盒陰影 &ndash; box-shadow, SVG的填充色 &ndash; fill等等。很靈活，很好用！

下面問(wèn)題來(lái)了，我要讓圖片邊框藍(lán)色，直接：

CSS Code復(fù)制內(nèi)容到剪貼板

1. border: 1em solid blue;  

不就好了，還要費(fèi)盡周折弄個(gè)currentColor搞摩斯(武漢話，&rsquo;干嘛&rsquo;意思)??？這活生生多了好多字節(jié)的大小??！

這個(gè)想法其實(shí)短見(jiàn)了，當(dāng)我們應(yīng)用一些CSS高級(jí)技能，尤其CSS3圖形技術(shù)的時(shí)候，你會(huì)發(fā)現(xiàn)，currentColor就是霧霾天氣下的強(qiáng)勁冷空氣，帶來(lái)無(wú)比的清爽與潔凈，下面一章節(jié)的栗子大家不妨好好感受下！
三、 currentColor的實(shí)戰(zhàn)表演秀

實(shí)戰(zhàn)1：背景色鏤空技術(shù)
去年介紹過(guò)“CSS背景色鏤空技術(shù)”，可以方便控制圖標(biāo)的顏色，很贊的想法。此文章對(duì)應(yīng)demo可以輕戳這里訪問(wèn)。

這種設(shè)計(jì)的目的就是鼠標(biāo)hover時(shí)候，圖標(biāo)可以跟著文字一起變色。如果不考慮兼容性問(wèn)題，我們可以稍稍改造下，使其實(shí)現(xiàn)更加簡(jiǎn)單：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .icon {   

2.     display: inline-block;   

3.     width: 16px; height: 20px;   

4.     background-image: url(../201307/sprite_icons.png);   

5.     background-color: currentColor; /* 該顏色控制圖標(biāo)的顏色 */  

6. }  

于是，我們想要鼠標(biāo)hover文字鏈接，其圖標(biāo)顏色要跟著一起變化，只要改變文字顏色就可以了：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .link:hover { color: #333; }/* 雖然改變的是文字顏色，但是圖標(biāo)顏色也一起變化了 */  

HTML結(jié)構(gòu)如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <a href="##" class="link"><i class="icon icon1"></i>返回</a>  

于是鼠標(biāo)hover就是#333顏色圖文合體變化：

您可以狠狠地點(diǎn)擊這里：背景色鏤空技術(shù)與currentColor demo

實(shí)戰(zhàn)2：CSS3圖標(biāo)生成與hover控制
今天開(kāi)春時(shí)候?qū)戇^(guò)有一定反響的“CSS3圖標(biāo)圖形生成技術(shù)個(gè)人攻略”一文，那個(gè)時(shí)候還沒(méi)有意識(shí)到可以借助CSS3 currentColor簡(jiǎn)化工作量和HTML代碼?，F(xiàn)在可以使用同樣的例子感受下currentColor的風(fēng)采。

所謂CSS3圖標(biāo)生成，就是圖標(biāo)完全由CSS3特性代碼組合合成。由于多半跟鏈接文字混用，因此，有個(gè)交互效果就是：hover文字的時(shí)候，圖標(biāo)的顏色也要跟著變化。我一開(kāi)始使用的是定值顏色，為了hover時(shí)候顏色控制方便，就大肆使用border屬性構(gòu)建圖形，雖然效果也有，但HTML和CSS都啰嗦了點(diǎn)。借助currentColor, hover時(shí)候的顏色變化，我們根本無(wú)需關(guān)心，因?yàn)闊o(wú)論是border, background, 還是box-shadow都使用currentColor作為圖形顏色，hover時(shí)候自然就會(huì)變成我們想要的文字顏色。

于是，之前文章demo中下圖這些CSS代碼就多余了：

具體每個(gè)圖標(biāo)代碼也簡(jiǎn)化了，拿平鋪圖標(biāo)舉例，9個(gè)點(diǎn)：

之前為了hover方便，使用border實(shí)現(xiàn)，于是5個(gè)元素上陣才模擬出來(lái)的，代碼熙熙攘攘如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .ico-repeat::before,   

2. .ico-repeat::after,   

3. .ico-repeat z { width: 3px; height: 7px; border-top: 3px solid #777; border-bottom: 3px solid #777; top: 5px; left: 3px; }   

4. .ico-repeat::before { left: 3px; }   

5. .ico-repeat::after { left: 13px; }   

6. .ico-repeat z { left: 8px; }   

7. .ico-repeat z::before { width: 7px; height: 3px; border-left: 3px solid #777; border-right: 3px solid #777; top: 2px; left: -5px; }   

8. .ico-repeat z::after { width: 3px; border-top: 3px solid #777; top: 2px; }   

使用currentColor我們可以擺脫實(shí)現(xiàn)方式的限制，例如，我們可以使用box-shadow + currentColor, 只要一個(gè)元素就可以了。

CSS Code復(fù)制內(nèi)容到剪貼板

1. .ico-repeat::before { width: 3px; height: 3px; background-color: currentColor; box-shadow: 0 5px currentColor, 5px 0 currentColor, 5px 5px currentColor, 10px 0 currentColor, 0 10px currentColor, 5px 10px currentColor, 10px 5px currentColor, 10px 10px currentColor; top: 5px; left: 3px; }  

HTML方便也沒(méi)有必要再內(nèi)嵌一個(gè)<z>元素，直接如下就可以了：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <a href="javascript:" class="ico-a"><i class="ico ico-repeat"></i>平鋪</a>  

鼠標(biāo)hover效果依然杠杠的，如下：

其他很多圖標(biāo)也可以做類(lèi)似的優(yōu)化，例如列表圖標(biāo)可以放心使用background-color + border + background-clip單標(biāo)簽三邊框生成技術(shù)，于是，只要兩個(gè)元素就足夠了，而之前至少要四個(gè)。

若想感受，您可以狠狠地點(diǎn)擊這里：CSS3圖標(biāo)圖形生成與currentColor demo
四、結(jié)語(yǔ)，體系中方能彰顯強(qiáng)大

在CSS2.1的年代，雖然沒(méi)有currentColor, 我們依然可以該蹦蹦該跳跳，因?yàn)?，那時(shí)候圖形這些東西都是交給圖片完成的。但是，CSS3(以及SVG)的強(qiáng)大特性、硬件發(fā)展（屏幕）以及設(shè)計(jì)趨勢(shì)賦予了其新的使命，圖形構(gòu)建就是其中之一。然而，阻礙之一就是如何方便控制圖形的狀態(tài)變化，幸好，我們有currentColor，圖形跟隨文字顏色狀態(tài)同時(shí)變化，達(dá)到了「圖文合一」的境界，這種境界已經(jīng)超越font-face, 必將在未來(lái)的web技術(shù)大潮中大放異彩！

關(guān)于CSS中currentColor關(guān)鍵字如何使用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。