按捺不住心中的想要噴薄而出的“洪荒之力”，我決定要寫點什么了……
事情的起因是“介個”樣子的，早上來到公司磨了點咖啡之后便拿著杯子找同事嘚瑟，同事還在被手上的項目搞得焦頭爛額沒空聽我裝逼。無奈之下，只能嘬著咖啡靜靜的看同事噼里啪啦的敲鍵盤。人都有個毛病，看自己總是看不清楚，找別人的毛病那是一找一個準(zhǔn)。看著編輯器上逐漸成形的代碼，我沒有忍住我那“性感的櫻桃小嘴”……
“大哥~你代碼寫的有點多啊，少寫一點也能實現(xiàn)這個效果的?！毖矍暗倪@個被項目搞的懵圈的家伙聽到我這句話后，當(dāng)時就燃了。我抬頭看了看四周，嗯不錯，高手們都還沒來，是時候進入裝逼模式了。
開啟老司機模式之后，同事直接給了我一個大寫的“服”字。裝逼完勝~事情如下：
/*同事的css*/
.active{
color:#C60;
border:thin solid #C60;
}
/*我的CSS*/
.active{
color:#C60;
border:thin solid;
}
發(fā)現(xiàn)了問題所在了么？我的CSS中的border沒有聲明border-color的顏色，只是單獨聲明了字體顏色color?？墒俏业膶懛ê屯碌膶懛ㄋ玫降慕Y(jié)果卻是一樣的。
嘿嘿~知道老司機的厲害了吧，為什么會出現(xiàn)這種情況呢？說實話一般還真的有很少人注意到這點，很多知名網(wǎng)站上也有類似這樣“重復(fù)聲明”的CSS樣式，我就不舉例了。之前我也不知道為啥會這樣。一次意外的錯誤讓我發(fā)現(xiàn)了這個問題，開始研究這個問題并且我還幸運的找到了答案。
下面我就開始傳授給你們我這最強的“裝逼絕學(xué)”。//心中默默念：“重復(fù)聲明”的越頻繁證明其基礎(chǔ)知識越不扎實。例如overflow在一些網(wǎng)站上幾乎每一級元素都會去聲明一下。用爛了……
這一切源于一個神秘的家伙——CurrentColor，估計看到這個單詞的第一眼就覺得怪怪的，很多人都不認(rèn)識它，看到它的第一反應(yīng)幾乎都是“我擦類！CSS中有這貨么？”。//包括文中的同事。我要告訴大家的是CSS中真有這貨，用到的地方很少或者用到了沒有意識到在用所以才會不認(rèn)識。不認(rèn)識沒關(guān)系，互相介紹下打過幾次交道就認(rèn)識了。它是CSS3新增的關(guān)鍵字，IE9+及其他相應(yīng)版本的現(xiàn)代瀏覽器才能正確識別它。
先來介紹這個看著很別扭的家伙，最后再來解釋下文章開頭事件的原因。循序漸進才是王道，讓我們一點一點的把它的光環(huán)給“扒掉”。
根據(jù)字面的理解它代表的是“現(xiàn)在顏色”或是“當(dāng)前顏色”，更為準(zhǔn)確一點的去理解的話應(yīng)該是“當(dāng)前文字的顏色”。它的用法很簡單咯。例如：
/*CurrentColor Demo Css*/
.ClassName {border:thin solid CurrentColor }
#IdName { background-color:CurrentColor;} //這個會讓文字顯示不出來
.ClassName{box-shadow:2px 2px 3px CurrentColor; }
只要是需要使用顏色的地方都可以用關(guān)鍵字CurrentColor替換，使其保持和當(dāng)前元素color屬性的值一致。
由于color屬性可以被繼承，所以有的時候只需要在祖元素設(shè)置好color屬性，其子元素和孫元素都可以使用currentcolor來調(diào)用祖元素的顏色。
最終LESS編譯之后渲染的結(jié)果如下圖：
嘿嘿，這下可算是搞清楚這個奇怪而又陌生的家伙的作用了。但是為什么在元素設(shè)置字體顏色之后再去設(shè)置邊框的話就不用去設(shè)置顏色了呢？//文章開頭處的CSS代碼。
回答這個問題我們要去Mozilla淘取一些知識點了。直接copy說明文檔過來吧。
Initial value:
as each of the properties of the shorthand:
- border-top-color: currentcolor
- border-right-color: currentcolor
- border-bottom-color: currentcolor
- border-left-color:currentcolor
文檔中說的很清楚，border-color這個屬性的初始值（Initial value）就是currentcolor，初始值明白不？根本原因就是因為這個。
這一坨長長的英文字母比顏色值的字符數(shù)量要多，除了屬性的默認(rèn)值是它的，別的地方想要調(diào)用color顏色的屬性值還要去寫上“一坨”一點也不節(jié)省代碼啊？前面只是簡單的介紹了這貨的本質(zhì)，怎么更好的讓它來為我們服務(wù)，還需要一定的技巧和靈感。//ps:box-shadow顏色的默認(rèn)值也是這貨。使用這貨的時候某些瀏覽器可能會有BUG，只是道聽途說，自己沒有試驗。
由以上所有文字我們可以總結(jié)出來幾點。首先這貨可以拿來裝逼，其次這貨能調(diào)用color的值，最后根據(jù)繼承性的存在一旦在DOM節(jié)點設(shè)置color屬性那么屬于此節(jié)點的分支都可以用這貨來調(diào)用color值。//說明的可能不準(zhǔn)確，反正就是父元素子元素的意思。
具體展示這貨威力的demo不詳細(xì)介紹了，一時半會我也想不起來，只是直覺上感覺這貨很定有相當(dāng)搞頭，字?jǐn)?shù)也差不多了就這樣吧，以后想起來了再來補上好了。
最后再啰嗦一句吧,移動終端的迅猛發(fā)展，讓前端工作成為不可或缺的一部分，創(chuàng)意和設(shè)計最終都是依靠前端的工作來實現(xiàn)的，隨著css3以及SVG等技術(shù)強大特性的顯露，圖形構(gòu)建也會成為具有相當(dāng)份量的存在，圖形構(gòu)建命題中如何控制圖形狀態(tài)的變化實是限制自身發(fā)展的掣肘因素之一，而currentcolor可以使其顏色和文本顏色一起變化的技術(shù)特性，等于減低了這種控制的部分技術(shù)難度?？梢灶A(yù)見的是currentcolor獨的的特性肯定會產(chǎn)生讓人驚艷的結(jié)果，吃瓜圍觀ing……
