初識

它是何物？具有怎樣的功效？它從哪里來？帶著這些疑問我們繼續。

下面是來自MDN的解釋：

currentColor代表了當前元素被應用上的color顏色值。使用它可以將當前這個顏色值應用到其他屬性上，或者嵌套元素的其他屬性上。

你這可以這么理解，CSS里你可以在任何需要寫顏色的地方使用currentColor這個變量，這個變量的值是當前元素的color值。如果當前元素沒有在CSS里顯示地指定一個color值，那它的顏色值就遵從CSS規則，從父級元素繼承而來。

到此似乎解決了上面三個哲學式的提問，但依然有些模糊。程序員之間的交流，還是上碼才好。

場景1

<p>約么？</p>

p{
    color: red;
}

此時，<p>標簽currentColor的值為red。

場景2

<div class="container">
    <p>約么？</p>
</div>

.container{
    color: #00ff00;
}

現在，我們沒有給<p>標簽指定顏色，它的color從父級容器也就是class為container的div繼承而來，換句話說此時p標簽的color為#00ff00，currentColor又是直接去取元素的color值，所以此時p標簽的currentColor值也為#00ff00。

場景3

如果父級元素也沒有寫color呢？其實這里都還是CSS規則的范疇，跟本文的主角關系不太大。但本著不啰嗦會死的原則，就展開了講。

如果父級元素也沒有指定顏色，那它的父級元素就會從父級的父級去繼承，直到文檔的根結點html標簽都還沒顯示指定一個顏色呢，就應用上瀏覽器默認的顏色唄~

<!doctype html>
<html>
    <head>
        <title>我來組成頭部</title>
    </head>
    <body>
        <p>約么？</p>
    </body>
    <footer>戰神金鋼，宇宙的保護神！</footer>
</html>

/**
 * 無CSS
 */

那，這個時候的黑色其實是瀏覽器默認給的。此時p標簽的currentColor自然也跟color值一樣，為黑色，純黑的#000。

如何用？

了解它是怎樣的物品后，下面問題來了，如何用？有額外的buff效果么，耗藍多么，CD時間長么。。。

前面說道，它就是一個CSS變量，存儲了顏色值，這個值來自當前元素的colorCSS屬性。當你需要為該元素其他屬性指定顏色的時候，它就可以登上舞臺了。

<div class="container">
    好好說話，有話好好說
</div>

.container{
    color: #3CAADB;
    border: 4px solid currentColor;
}

這里我們第一次領略了currentColor的奇效。在指定邊框顏色的時候，我們直接使用currentColor變量，而沒有寫一個傳統的顏色值。

你似乎也知道了該如何用了。不只是border，其他能夠使用顏色的地方，比如background，box-shadow等等。

帶你裝逼帶你飛

新技能就是如此炫酷。大開腦洞任性地去使用吧！

與漸變混搭

你可能無法想象到的是，除了可以將currentColor用到普通需要顏色的場景，它同樣可以被用在漸變中。

<div class="container">
</div>

.container{
  height:200px;
  color: #3CAADB;
  background-image: linear-gradient(to right, #fff, currentColor 100%);
}

甚至也可用于填充svg，下面會有相應示例。

與CSS動畫結合

當與CSS animation結合，可以得到更加有創意的效果，比如這個來自codepen的示例

See the Pen currentColor by Scott Kellum (@scottkellum) on CodePen.

更加簡潔的CSS

其實，新技能不只是裝逼那么單純，合理的使用currentColor 變量會讓你的CSS代碼變得簡潔。這才是我們想要達到的目的。以炫技為目的技能是沒有生產意義的。

看下面這個例子（這個示例靈感來自這里）

我們在按鈕中使用了一個svg圖標。你是一個負責任的FE，所以，對這個按鈕的各種狀態:focus，:hover，:active都作了樣式上的處理。同時，為了讓圖標也跟著保持一致的姿態變更，需要把對<a>標簽的樣式處理同樣就到到<svg>標簽上。于是你的CSS代碼看起來就是下面這樣的了。

/*a 標簽*/
.button {
    color: #117B6F;
    font-size: 1.2em;
}
.button:hover, .button:focus {
    color: #01B19A;
}
.button:active {
    color: #02D7BB;
}

/*svg 標簽*/
.button svg {
    height: 17px;
    width: 17px;
    fill: #117B6F;
}
.button:hover svg, .button:focus svg {
    fill: #01B19A;
}
.button:active svg {
    fill: #02D7BB;
}

你也發現了，代碼有點冗余。接下來，我們用currentColor來將它簡化一下。于是成了下面這樣：

/*a 標簽*/
.button {
    color: #117B6F;
    font-size: 1.2em;
}
.button:hover, .button:focus {
    color: #01B19A;
}
.button:active {
    color: #02D7BB;
}

/*svg 標簽*/
.button svg {
    height: 17px;
    width: 17px;
    fill: currentColor;
}