有沒有辦法將CSS中的border-color
設置爲與文本顏色相同?將CSS邊框顏色設置爲文字顏色
例如有一個類添加了一個底部虛線邊框,但保留所述邊框的顏色與文本的顏色相匹配的方式與text-decoration:underline
的顏色非常相似,即文本的顏色(color
屬性) ?
有沒有辦法將CSS中的border-color
設置爲與文本顏色相同?將CSS邊框顏色設置爲文字顏色
例如有一個類添加了一個底部虛線邊框,但保留所述邊框的顏色與文本的顏色相匹配的方式與text-decoration:underline
的顏色非常相似,即文本的顏色(color
屬性) ?
你實際上得到這個行爲是免費的;它在spec提到:
如果不帶邊框屬性指定一個元素的邊框顏色,用戶代理必須使用元素的「顏色」屬性的值作爲邊框顏色的計算值。
因此,所有你需要做的就是忽略顏色使用border
速記屬性時:
.dotted-underline {
border-bottom: dotted 1px;
}
或者只使用border-style
和border-width
性質,而不是border-color
:
.dotted-underline {
border-bottom-style: dotted;
border-bottom-width: 1px;
}
或者,在browsers that support新的CSS3關鍵字currentColor
中,指定作爲border-color
(u seful用於覆蓋現有border-color
聲明):
.dotted-underline {
border-bottom-color: currentColor;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
我無法在新規範中找到該規則:http://www.w3.org/TR/css3-background/ - 可能是它已被刪除'currentColor'贊成... – 2011-12-29 03:08:50
我找到了。該規範指出'border - * - color'屬性的初始值是'currentColor'(它對應於CSS 2.1中的規則)。 – 2011-12-29 03:11:28
@ŠimeVidas:其實是一樣的行爲。所有的CSS3模塊都提供了一個代表當前使用顏色的關鍵字。 – BoltClock 2011-12-29 03:13:56
您將不得不將它們設置爲相同的顏色。
如果你想讓你的CSS更具編程性和乾爽,你應該使用類似LESS的東西。它可以爲你節省很多工作,所以你只需要申報一次該顏色。
這不是他要求的!如果你不知道元素的顏色,你想設置邊框?這裏不需要CSS預處理器。 (可惜我還不能投票) – 2013-06-19 14:33:59
此:
border-bottom: 1px dotted currentColor;
從規格:
currentColor 的「顏色」屬性的值。 'currentColor'關鍵字的計算值是'color'屬性的計算值。 如果在'color'屬性本身設置了'currentColor'關鍵字,則將其作爲'color:inherit'對待 。
在這裏看到:http://www.w3.org/TR/css3-color/#currentcolor
(不IE8的工作,雖然)
更新:所以,似乎明確地設置顏色值是沒有必要的,因爲的默認值是color
屬性的值。
所以,這個工作得很好:
border-bottom: 1px solid;
+1好消息是,它與CSS1和2的行爲有關,如果未指定'color'值作爲'border-color'的初始值,那就是在所有瀏覽器中得到很好的支持。 – BoltClock 2011-12-29 03:06:29
這個問題的逆已經被問:?爲什麼CSS邊框顏色從字體的顏色屬性繼承(http://stackoverflow.com/questions/34667409 /爲什麼要做的css邊界顏色繼承從字體顏色屬性) – BoltClock 2016-01-08 03:39:14