css – 使用border-style时自动添加3px边框而不指定边框大小

2019年8月4日 175次阅读

我注意到在没有指定边框大小的情况下设置边框样式会导致边框被添加到元素中.

HTML：

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

CSS：

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

预期结果：
盒子周围没有边框,因为我们没有指定边框的宽度.

实际结果：
盒子周围出现黑色3px边框.

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

我想我的问题是,为什么会发生这种情况？它是W3C CSS规范的一部分吗？

最佳答案 了解属性的来源非常重要：

关于颜色属性,如果未指定,则来自border-color属性,如果未设置,则从每个border-* side * -color获取显性值,如果未设置,则返回到currentColor的值,由下式指定：为颜色设置的值,默认为黑色.

颜色

边界 – >没有颜色设置 – >来自border-color – >没有颜色设置 – >从占优势的边界 – *侧* -color->没有边设置,恢复为currentColor

宽度设置采用类似的路径 – 但在单个宽度设置处停止,默认为中等

宽度

边界 – >没有宽度设置 – >从border-width获得 – >没有宽度设置 – >从占主导地位的border-*side*-width(默认为中等)

总之,默认值为黑色和中等.

点赞