使用边框样式时自动添加3px边框，而无需指定边框大小

Question

我注意到，设置边框样式而不指定边框大小会导致将边框添加到您的元素中。

HTML：

<div class="box">
</div>

CSS：

.box
{
    width: 200px;
    height: 300px;
    background-color: green;
    border-style: solid;
}

预期的结果：由于没有指定边框的宽度，因此框周围没有边框。

实际结果：黑色的3px边框出现在框周围。

小提琴：http : //jsfiddle.net/Lr7mt/

我想我的问题是，为什么会这样？它是W3C CSS规范的一部分吗？

Answer 1

了解属性的来源非常重要：

关于颜色属性，如果未指定，则来自border-color属性，如果未设置，则从每个属性获取主导值border-*side*-color，如果未设置，则恢复为 的值currentColor，该值由color默认为黑色的值集决定。

颜色

border-> 没有设置颜色 -> 从border-color-> 没有设置颜色 -> 从主导位置获取border-*side*-color-> 没有设置边，恢复为currentColor

宽度的设置采用类似的路线 - 但停在各个边的宽度设置上，默认为medium

宽度

border-> 未设置宽度 -> 从border-width-> 未设置宽度 -> 从主导位置获取border-*side*-width（默认为medium）

总之，默认值为black和medium。