使用边框样式时自动添加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

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

关于color属性，如果未指定，则来自border-color属性，如果未设置，则从每个border-*side*-color获取显性值，如果未设置，则恢复为{{3 }，由color设置的值默认为黑色。

<强>颜色

border - ＆gt;没有颜色设置 - ＆gt;来自border-color - ＆gt;没有颜色设置 - ＆gt;来自显性border-*side*-color - ＆gt;没有设置边，恢复为currentColor

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

<强>宽度

border - ＆gt;没有宽度设置 - ＆gt;来自currentColor - ＆gt;没有宽度设置 - ＆gt;从显性border-width获得（默认为medium）

---

总之，默认值为black和medium。

Answer 2

这是因为边框默认宽度为中等：

border: solid medium black;

一个例子：

http://jsfiddle.net/Lr7mt/1/

Answer 3

是的，有默认的边框样式，但specification并没有精确定义每个关键字的厚度（thin，medium和thick ），因此具体实施。

尽管如此，它要求厚度确实遵循thin≤medium≤thick不等式，并且值在单个文档上是常量。

了解更多here。