将CSS边框颜色设置为文本颜色

Question

有没有办法将border-colorCSS 设置为与文本颜色相同？

例如,有一个类添加一个底部虚线边框,但保留所述边框的颜色以匹配文本的颜色,其方式text-decoration:underline与文本(color属性)的颜色大致相同？

Answer 1

你实际上是免费获得这种行为; 它在规范中提到:

如果未使用border属性指定元素的边框颜色,则用户代理必须使用元素的'color'属性的值作为边框颜色的计算值.

所以你要做的就是在使用border速记属性时省略颜色:

.dotted-underline {
    border-bottom: dotted 1px;
}

或者只使用border-style和border-width属性,而不是border-color:

.dotted-underline {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

或者,在支持新CSS3关键字的浏览器中currentColor,将其指定为border-color(用于覆盖现有border-color声明)的值:

.dotted-underline {
    border-bottom-color: currentColor;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

仅供参考,如果过去曾设置过该元素的`border-color`,则必须覆盖它.你不能只指定一个新规则`border-bottom:dotted 1px`,因为它将保留以前的颜色集; 你只是改变了'border-style`和`border-width-bottom`属性. (3认同)

Answer 2

这个:

border-bottom: 1px dotted currentColor;

从规格:

currentColor'color '属性的值.'currentColor'关键字的计算值是'color'属性的计算值.如果在'color'属性上设置'currentColor'关键字,则将其视为'color:inherit'.

(虽然在IE8中不起作用)

更新:因此,似乎没有必要显式设置颜色值,因为默认值已经是color属性的值.

所以,这很好用:

border-bottom: 1px solid;