移除边框后默认按钮颜色为何发生变化？

你观察得很准！在Ubuntu 18的Chrome 78里，移除按钮边框后背景变暗的现象，本质和浏览器对原生控件的渲染逻辑有关，而不只是background-color: buttonface这个属性的问题，我来给你拆解一下：

• 原生控件的样式绑定：Chrome默认给按钮用了-webkit-appearance: button，这意味着按钮是用系统原生的GTK控件样式渲染的（Ubuntu用的是GTK主题）。原生按钮的视觉效果是和边框绑定的——系统主题里，标准带边框的按钮和无边框的按钮，本身就定义了不同的背景色调。当你加上border: none，浏览器会把它识别为“非标准按钮”，自动切换到主题里对应的无边框控件背景色，也就是你看到的暗色调。
• 关于buttonface的误区：buttonface确实是CSS系统颜色，它的值由系统主题决定，但浏览器渲染原生控件时，不会直接把它作为固定背景色。而是会根据控件的状态（比如是否有边框、是否激活），对buttonface进行明暗调整。所以你看到的变暗，是浏览器根据控件状态对系统颜色做了修改，不是buttonface本身的说明太简略导致的理解偏差。

解决办法：保持背景色同时移除边框 #

如果你想去掉边框但保留原来的按钮背景色，可以强制关闭浏览器的原生控件渲染，手动控制样式：

.noBorder {
  border: none;
  /* 关闭原生外观，脱离系统控件渲染逻辑 */
  -webkit-appearance: none;
  appearance: none;
  /* 手动设置系统按钮背景色 */
  background-color: buttonface;
  /* 保留默认按钮内边距，避免按钮尺寸变小 */
  padding: 0.3em 0.6em;
}

这样设置后，按钮就会保持原来的背景色，同时去掉边框了。

内容的提问来源于stack exchange，提问作者formicini