Question

我正在查看w3schools上的border-width页面，它说：

注意：始终在border-width属性之前声明border-style属性。在设置宽度之前，元素必须具有边框。

我试图找到一个参考证实了这个陈述。似乎在border-width工作之前声明border-style就好了。

.demo {
  width: 100px;
  height: 100px;
  margin: 10px auto;
}
.ten-red-solid {
  border-width: 10px;
  border-color: red;
  border-style: solid;
}
.red {
  border-color: red;
}
.ten {
  border-width: 10px;
}
.solid {
  border-style: solid;
}

<div class="ten-red-solid demo"></div>
<div class="ten red solid demo"></div>

Answer 1

事实并非如此。

W3Schools不是官方文档来源，因此不应过于重视任何建议。

W3Schools针对学习，测试和培训进行了优化。例子可能会简化以提高阅读和基本理解。我们会不断审查教程，参考资料和示例以避免使用错误，但我们无法保证所有内容的完整正确性。

浏览器在加载所有样式后对其进行评估，无论它们的声明顺序如何。

为清楚起见，以下两种风格相同：

div{
   border-width:2px;
   border-style:solid;
   border-color:#000;
}

div{
   border-style:solid;
   border-width:2px;
   border-color:#000;
}

Answer 2

元素当然可以具有border-width值，而不是border-style（或者更确切地说，border-style默认为none）。你只是看不到边界。

我怀疑W3Schools 真正意味着你应该确保在给元素边框时始终声明border-style，因为在默认情况下，你不会看到边框，无论边框宽度和颜色是什么，如果你忘了给它一个边框样式，你给它一个元素。¹

或者，如果该页面的作者确实认为声明的顺序很重要，那么作者就错了。 border速记可以按任意顺序接受值，只要它们对应border-color，border-style和border-width中的每一个，因为任何值之间都没有词汇歧义。组件属性（即border-color的值永远不会被误认为是其他两个属性的值）。

¹ _{另一方面，单独声明border-style就足以让元素生成边框。这是因为border-width的初始值实际上是medium，而不是零，而border-color的初始值是currentColor，而不是transparent。}

div {
  border: solid;
}

<div>Text</div>

是否有正确的命令来声明边框宽度和边框样式？

2 个答案: