在CSS1和CSS2中定義了border-color屬性的默認值是color屬性的值,但卻沒有為此定義一個相應的關鍵字。
這個問題在 SVG 中被意識到了,于是在 SVG 1.0 中引入了currentColor關鍵字。
在CSS3中擴展了顏色值包含currentColor關鍵字,并用于所有接受顏色的屬性上。
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+ |