将CSS边框颜色设置为文本颜色 [英] Set CSS Border Color to text color

问题描述

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

Is there a way to set the border-color in CSS to be the same as the text color?

例如，有一个类添加一个底部的虚线边框，但留下所述边框的颜色匹配文本的颜色与 text-decoration：underline code>是文本的颜色（ color 属性）？

For instance having a class which adds a bottom dotted border, but leaving the color of said border to match the color of the text in much the same way as the color of text-decoration:underline is the color of the text (color property)?

推荐答案

你实际上是免费获得这种行为的;在规范中提及：

You actually get this behavior for free; it's mentioned in the spec:

如果没有使用border属性指定元素的边框颜色，用户代理必须使用元素的'color'属性的值作为边框颜色的计算值。

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 速记属性时的颜色：

So all you have to do is omit the color when using the border shorthand property:

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

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

Or only use the border-style and border-width properties, and not border-color:

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

或者，在浏览器支持新的CSS3关键字 currentColor ，指定 border-color （用于覆盖现有的 border-color 声明）：

Or, in browsers that support the new CSS3 keyword currentColor, specify that as the value for border-color (useful for overriding existing border-color declarations):

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

边框的颜色默认情况下与文字颜色相同。

这篇关于将CSS边框颜色设置为文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！