Question

在CSS中，我发现在编码时省略边框样式并不重要：

input{
/*here border style is not mentioned*/
border-width:  3px;
border-color: red;

}

在这种情况下，边界仍然出现。但是，如果编码如下，则不会出现边界：

input{
border: 3px red; /*here border style is not mentioned*/

}

我还在w3school编辑上测试过，请看看删除了边框样式的屏幕截图。为什么边框出现在第3个屏幕截图中？我错过了什么？

https://www.w3schools.com/css/tryit.asp?filename=trycss_border-color1
https://imgur.com/xgTVpmN

https://www.w3schools.com/css/tryit.asp?filename=trycss_border
https://imgur.com/b7blLMH

https://www.w3schools.com/css/tryit.asp?filename=trycss_form_focus2
https://imgur.com/1wxD5OG

Answer 1

input元素有一个默认的border定义，所以当你覆盖每个属性时，就像在第一个例子中一样，你仍然会看到它，因为你没有改变风格，但是你用速记覆盖了整个默认值，如果你没有在速记上为style设置任何值，它将采用属性的初始值，在这种情况下是none。

border CSS属性是一个简写属性，用于一次设置所有单独的border属性值：border-width，border-style和border-color。与所有速记属性一样，未指定的任何单个值都将设置为其对应的初始值。

＆安培;

注意：border-style的默认值为none。

From MDN Source

边框式强制还是可选的？看到了不一致的行为

1 个答案: