html - 边框样式在进度条中用作背景颜色

Question

当我注意到一些奇怪的事情时，我正在测试动画进度条的 jsfiddle。我在 progress 标签上有一个 CSS 规则:

progress {
    border:2px solid #ccc;
}

但是在 CSS 之前，进展是这样的:

<progress value="22" max="100">
</progress>

为此，应用 CSS 后:

progress {
  border: 2px solid #ccc;
}

<progress value="22" max="100">
</progress>

为什么 CSS 中这么小的变化会导致进度条的外观发生如此大的变化。例如，绿色是从哪里来的？

Answer 1

是的。 progress 元素是替换元素，其行为与普通元素不同。

默认情况下，浏览器以“酷炫的方式”显示它们。但是，当您修改它们时，浏览器会切换到“常规方式”以便能够使用您的样式。

button 元素也是如此。

.border { border: 1px solid; }

<progress value="70" max="100"></progress>
<button>Button</button>
<hr />
<progress value="70" max="100" class="border"></progress>
<button class="border">Button</button>