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

Question

35

有没有一种方法可以在CSS中将border-color设置为与文本颜色相同的颜色？

例如，创建一个类来添加底部点状边框，但让该边框的颜色与文本颜色匹配，就像text-decoration:underline的颜色与文本颜色 (color属性) 相同一样。

- Kenzal Hunter

1

3个回答

10

This:

border-bottom: 1px dotted currentColor;

根据规范：

currentColor ‘color’属性的值。‘currentColor’关键字的计算值是‘color’属性的计算值。如果在‘color’属性本身上设置了‘currentColor’关键字，则它将被视为‘color: inherit’。

(但在IE8中无法正常工作)

更新：因此，明确设置颜色值并不是必要的，因为默认值已经是 “color”属性的值。

所以这个可以正常工作：

border-bottom: 1px solid;

- Šime Vidas

好消息是，这与CSS1和2的行为有关，如果未指定，则使用color值作为border-color的初始值，并且所有浏览器都非常支持它。 - BoltClock

0

你必须自己设置这些颜色为同一个颜色。

如果你想让你的CSS更具有程序性和DRY（不重复原则），你应该使用像LESS这样的东西。它可以为你节省很多工作，因此你只需声明一次该颜色即可。

- Josh Smith

这不是他要求的！如果你不知道想要设置边框的元素的颜色呢？这里不需要使用CSS预处理器。（遗憾的是我还不能投票反对） - Lajos Mészáros

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

你实际上可以免费获得这种行为；它在规范中被提到：spec：

如果元素的边框颜色没有使用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;
}