currentColor

說明:

在CSS1和CSS2中定義了border-color屬性的預設值是color屬性的值,但卻沒有為此定義一個相應的關鍵字。

這個問題在 SVG 中被意識到了,於是在 SVG 1.0 中引入了currentColor關鍵字。

在CSS3中增加了顏色值包含currentColor關鍵字,並用於所有接受顏色的屬性上。

currentColorcolor 屬性的值,具體意思是指:currentColor關鍵字的使用值是color屬性值的計算值。
  • 如果currentColor關鍵字被應用在color屬性自身,則相當於是color: inherit
  • 上述這些話都是什麼意思呢?先看個例子

    示例程式碼:

    div { border: 1px solid; color: red; }

    如果你能立馬知道上述程式碼的執行結果,那麼就差不多理解 currentColor 關鍵字的意思了。

    上述程式碼將會讓div擁有一個紅色的邊框,這就解釋了 border-color 屬性的預設值是 color 屬性的值;

    如果將上述程式碼中的color屬性定義刪除,那麼邊框的顏色將取決於父元素的 color 計算值,因為 color 擁有繼承性;

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-8.0 #1 2.0+ 4.0+ 4.0+ 3.5+ 3.2+ 2.1+ 18.0+
9.0+
  1. 不支援currentColor關鍵字,但支援以不定義該值的方式達到相同的效果;