为什么border-radius会导致chrome中的按钮发生巨大的样式更改？

Question

这真的很奇怪：

Chrome按钮中没有任何内容，如下所示：

<button>Test</button>

然而，当您抛出最轻微的边界曲率时，css会显着转移到

<button style="border-radius:1px">Test</button> 

事件更明显的是button:active css更改....

如何通过向对象添加样式来改变这么多属性？ 甚至还有基于样式的css选择器这样的东西？

即。 button:styled{}？

这是一个jsfiddle https://jsfiddle.net/vya24rhw/

Answer 1

您看到很大差异的原因是因为当没有设置border-radius时，UA（WebKit）会将-webkit-appearance属性的值指定为button，而在那里是border-radius集，它会将其重置为none。似乎button外观具有一些特定的样式设置，当外观设置为none时，这些设置不会应用。可以从Developer Console中的 Computed Styles 选项卡查看。

如2005年10月7日<{sup} this WebKit blog article所述，按钮有三个外观常量，即push-button（由<input type="submit" .../>使用）， bevel-button和button（由<button>元素使用）。设置外观常量后，元素将继续使用预定义的外观设置，除非我们将appearance值明确重置为none或使用我们自己的背景和/或边框属性。在我看来，这解释了我们所看到的差异的原因。

注意：博客文章未明确指定border-radius，但我正在考虑边框属性，以涵盖与边框及其样式相关的所有属性的整个范围。