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

Question

有没有办法将 CSS 中的 border-color 设置为与文本颜色相同？

例如有一个添加底部虚线边框的类，但是让所述边框的颜色与文本的颜色匹配，就像 text-decoration:underline 的颜色一样是文本的颜色(color 属性)？

Answer 1

你实际上是免费获得这种行为的；在 spec 中提到:

If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the 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;
}

或者，在 browsers that support 中新的 CSS3 关键字 currentColor，将其指定为 border-color 的值(用于覆盖现有的 border-color 声明):

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

边框的颜色 will be the same as the text color by default .