html - 为什么删除边框后默认按钮会改变颜色？

Question

从运行下面的代码片段可以看出，移除边框后背景颜色会变暗。我猜它与浏览器默认样式表中的 background-color: buttonface; 有关，但我无法理解它在 w3 上的简短描述。

浏览器:Ubuntu 18 上的 Chrome 78。

.noBorder {
  border: none;
}

<button type="button" class="noBorder">No border</button>
<button>With border</button>

Answer 1

我认为您不会在经典 CSS 世界中找到对这种行为的解释，因为按钮是特殊元素。您可能需要深入了解每个浏览器如何实现按钮元素以了解正在发生的事情。

我没有任何官方证据，只能使用简单的词:按钮具有浏览器应用的默认样式(与边框和背景相关)，如果您尝试更改任何值，您将破坏一切。

例子:

<button style="background-color:grey">button</button>
<button style="border-color:grey">button</button>
<button style="border-width:3px">button</button>
<button style="border-radius:5px">button</button>
<button style="border-image:none">button</button>
<button style="border-image-slice:1">button</button>
<button style="background-origin:content-box">button</button>
<button style="background-clip:content-box">button</button>
<button>button</button>

 

在上面，您会注意到，如果我们更改任何与边框或背景相关的规则(即使是不相关的规则，如 border-image-slice 或 背景剪辑)。在 Firefox 中，它是不同的，因为最后四个按钮将保持其默认样式。不知道其他浏览器，但它可能也不同。

更新

在最新版本的 Chrome 中，输入元素似乎也发生了同样的事情:

<input>
<input style="border-image-slice:1">
<input style="border-image:none">
<input style="border-width:3px">
<input style="background-origin:content-box">