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

Question

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

例如，有一个类添加一个底部虚线边框，但保留所述边框的颜色以匹配文本的颜色，就像text-decoration:underline的颜色是文本的颜色一样（ color财产）？

Answer 1

你实际上是免费获得这种行为;它在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;
}

或者，在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的颜色。

Answer 2

此：

border-bottom: 1px dotted currentColor;

来自规范：

  

<强> currentColor       'color'属性的值。 'currentColor'关键字的计算值是'color'属性的计算值。   如果在'color'属性本身上设置'currentColor'关键字，   它被视为'颜色：继承'。

见这里：http://www.w3.org/TR/css3-color/#currentcolor

（虽然在IE8中不起作用）

---

更新：因此，似乎无需显式设置颜色值，因为默认值 是color属性的值。

所以，这很好用：

border-bottom: 1px solid;

Answer 3

您必须自己将它们设置为相同的颜色。

如果您希望CSS更具编程性和干燥性，则应使用LESS之类的内容。它可以为您节省大量的工作，因此您只需要声明一次颜色。