currentColor

Created: November-22, 2018

currentColor 返回當前元素的計算顏色值。

使用相同的元素

由於 color 屬性設定為 red，因此 currentColor 的計算結果為紅色：

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

在這種情況下，為邊框指定 currentColor 很可能是多餘的，因為省略它應該產生相同的結果。如果由於更具體的選擇器而被覆蓋，則僅在同一元素內的 border 屬性內使用 currentColor。

由於它是計算顏色，因此在下面的示例中邊框將為綠色，因為第二個規則會覆蓋第一個：

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

繼承父級的顏色，此處 currentColor 的計算結果為藍色，使子元素的邊框顏色為藍色。

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor 也可以被其他通常不會從 color 屬性繼承的規則使用，例如 background-color。下面的示例顯示了使用父級中的顏色集作為其背景的子項：

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}