如何在HTML中设置按钮统一边框颜色？解决Chrome自动淡化边框问题

Chrome对原生<button>元素有默认的用户代理（UA）样式，会通过border-style: outset配合内置的阴影/渐变效果模拟立体按钮，这会导致你单独设置的border-color: black被干扰，出现左上边框变浅灰的情况。

你可以通过以下步骤彻底解决这个问题：

• 重置浏览器默认的按钮外观，消除自带样式的干扰：

button {
  -webkit-appearance: none;
  appearance: none;
}

• 明确设置完整的边框属性，确保样式完全生效：

button {
  border: 1px solid black; /* 可根据需求调整边框宽度 */
}

如果需要拆分属性单独设置，也可以这样写：

button {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

• 若仍有残留的阴影效果，可手动清除默认的box-shadow：

button {
  box-shadow: none;
}

如果需要保留按钮的点击反馈，可以自行添加:active状态的样式，比如：

button:active {
  background-color: #f0f0f0;
}

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