为什么边框样式显示边框，即使没有设置宽度？

Question

在以下代码段中，CSS规则应仅在顶部创建边框：

.site {
    border-style: solid;
    border-top-color: #8ab51e;
    border-top-width: 10px;
}

<div class="site">This is some text</div>

但是这会在所有四个边上创建一个边框，即使我只在顶部设置了宽度。

当我使用border-top-style时，它可以正常工作：

.site {
    border-top-style: solid;
    border-top-color: #8ab51e;
    border-top-width: 10px;
}

<div class="site">This is some text</div>

为什么border-style显示边框，即使这些边没有设置宽度？

Answer 1

在CSS中将Response.Redirect(ListHomePage(clientContext1, "Test ListName")); 更改为此内容：

.site

Answer 2

来自MDN :(大胆是我的）

  

border-style属性是用于设置的简写属性    元素边框的所有四边的线条样式。       ...

     

border-style的默认值为none。

所以设置border-style: solid; - 即使你没有设置border-width - 所有4个边都有边框！

那么边界宽度来自哪里，为什么它是黑色的？

• 关于边框宽度：如果指定了边框，但没有宽度 - 那么它的默认（初始）值为 medium 。

  多少钱？

  嗯，根据spec - 它取决于用户代理 - （通常是3-4px。）

  

前三个值（薄，中，厚）的解释取决于用户   剂。但是，必须遵循以下关系：

     

'thin'＆lt; ='medium'＆lt; ='thick'。

• 关于边框的黑色：如果指定了边框，但没有颜色，则它会从其父级的文本颜色继承其颜色。

这是demo fiddle

.site {
  width: 200px;
  height: 200px;
  border-style: solid;
  background: tomato;
  color: blue;
  border-top: solid #8ab51e;
  border-top-width: 10px;
}

<div class="site"></div>

修复？

只需删除规则border-style: solid;

即可

fiddle