CSS中存在一個神秘的變量，少有人知自然也不怎麼為人所用。它就是<code>crrentColor</code>變量（或者說是CSS關鍵字，但我覺得稱為變量好了解些）。
它是何物？具有怎樣的功效？它從哪裡來？帶着這些疑問我們繼續。
<code>currentColor</code>代表了目前元素被應用上的<code>color</code>顔色值。 使用它可以将目前這個顔色值應用到其他屬性上，或者嵌套元素的其他屬性上。
你這可以這麼了解，CSS裡你可以在任何需要寫顔色的地方使用<code>currentColor</code>這個變量，這個變量的值是目前元素的<code>color</code>值。如果目前元素沒有在CSS裡顯示地指定一個<code>color</code>值，那它的顔色值就遵從CSS規則，從父級元素繼承而來。
到此似乎解決了上面三個哲學式的提問，但依然有些模糊。程式員之間的交流，還是上碼才好。
場景1
此時，<code><p></code>标簽<code>currentColor</code>的值為<code>red</code>。
場景2
現在，我們沒有給<code><p></code>标簽指定顔色，它的<code>color</code>從父級容器也就是<code>class</code>為<code>container</code>的<code>div</code>繼承而來，換句話說此時<code>p</code>标簽的<code>color</code>為<code>#00ff00</code>，<code>currentColor</code>又是直接去取元素的<code>color</code>值，是以此時<code>p</code>标簽的<code>currentColor</code>值也為<code>#00ff00</code>。
場景3
如果父級元素也沒有寫<code>color</code>呢？其實這裡都還是CSS規則的範疇，跟本文的主角關系不太大。但本着不啰嗦會死的原則，就展開了講。
如果父級元素也沒有指定顔色，那它的父級元素就會從父級的父級去繼承，直到文檔的根結點<code>html</code>标簽都還沒顯示指定一個顔色呢，就應用上浏覽器預設的顔色呗~
那，這個時候的黑色其實是浏覽器預設給的。此時<code>p</code>标簽的<code>currentColor</code>自然也跟<code>color</code>值一樣，為黑色，純黑的<code>#000</code>。
了解它是怎樣的物品後，下面問題來了，如何用？有額外的<code>buff</code>效果麼，耗藍多麼，CD時間長麼。。。
前面說道，它就是一個CSS變量，存儲了顔色值，這個值來自目前元素的<code>color</code>CSS屬性。當你需要為該元素其他屬性指定顔色的時候，它就可以登上舞台了。
這裡我們第一次領略了<code>currentColor</code>的奇效。在指定邊框顔色的時候，我們直接使用<code>currentColor</code>變量，而沒有寫一個傳統的顔色值。
你似乎也知道了該如何用了。不隻是<code>border</code>，其他能夠使用顔色的地方，比如<code>background</code>，<code>box-shadow</code>等等。
新技能就是如此炫酷。大開腦洞任性地去使用吧！
你可能無法想象到的是，除了可以将<code>currentColor</code>用到普通需要顔色的場景，它同樣可以被用在漸變中。
甚至也可用于填充svg，下面會有相應示例。
其實，新技能不隻是裝逼那麼單純，合理的使用<code>currentColor</code> 變量會讓你的CSS代碼變得簡潔。這才是我們想要達到的目的。以炫技為目的技能是沒有生産意義的。
我們在按鈕中使用了一個svg圖示。你是一個負責任的FE，是以，對這個按鈕的各種狀态<code>:focus</code>，<code>:hover</code>，<code>:active</code>都作了樣式上的處理。同時，為了讓圖示也跟着保持一緻的姿态變更，需要把對<code><a></code>标簽的樣式處理同樣就到到<code><svg></code>标簽上。于是你的CSS代碼看起來就是下面這樣的了。
你也發現了，代碼有點備援。接下來，我們用<code>currentColor</code>來将它簡化一下。于是成了下面這樣：
仔細想想不難發現，當使用<code>currentColor</code>後，我們的CSS也變得更加好維護了。
還拿上面的按鈕示例來說，優化之前不但代碼備援，而且哪天PM來勁了說這顔色飽看，給換個其他色。于是你得把<code><a></code>标簽和<code><svg></code>一起換了。
但優化後就不一樣了，因為<code><svg></code>使用的填充是<code>currentColor</code>，你隻需要改變<code><a></code>标簽的顔色，它也就跟着變了。真正做到了牽一發而不動全身。這不正是衆碼友們畢生所追求的理想程式設計境界麼。
一提到浏覽器相容性，FE同學們或許就不敢那麼任性了。之前你可能是這樣的：
當聽到IE傳來的噩耗，你可能是這樣的：
經測，
本機Win7搭載的IE8不支援
本機安裝的火狐31發來戰報表示支援
Chrome，你猜？
本機Safari 5.1.7也表示支援
本機Opera 26 同樣表示支援
<a href="http://css-tricks.com/currentcolor/">css-tricks currentColor</a>
<a href="http://osvaldas.info/keeping-css-short-with-currentcolor">Keeping CSS short with currentColor</a>
<a href="http://demosthenes.info/blog/908/The-First-CSS-Variable-currentColor">The First CSS Variable: currentColor</a>