Chrome/Firefox中CSS border-bottom-color显示偏深如何调整

问题解决方法 #

该问题是浏览器默认边框样式渲染规则不一致导致的，可按以下步骤依次排查修复：

1. 首先补充显式的边框样式声明，这是最高发的原因
   你当前只指定了边框宽度和颜色，未指定边框样式，Chrome、Firefox默认会对未声明样式的边框使用inset/outset这类带立体效果的内置样式，会自动叠加明暗渐变，导致红色看起来比纯#f00更深。仅移动端Safari默认对这类情况的处理是按solid样式渲染，所以显示符合预期。
   补充一行代码即可解决90%以上的这类问题：

border-bottom-style: solid;

2. 如果补充后仍有差异，直接统一重置边框属性，覆盖所有浏览器默认样式
   部分表单元素（input、button等）就算设置了appearance: none，仍会残留浏览器内置的边框默认配置，直接全量指定边框属性即可避免污染：

/* 先清空所有默认边框配置 */
border: 0;
/* 再单独指定下边框，一次性写全宽度、样式、颜色 */
border-bottom: 4px solid #f00;
/* 补充无前缀的appearance适配Firefox */
-webkit-appearance: none;
appearance: none;

3. 特殊情况排查
   如果上述配置都加了仍有颜色差异，检查两个配置：

• 元素是否设置了box-shadow，浏览器内置的微小阴影会叠加到边框上，显式加box-shadow: none关闭即可
• 设备是否开启了系统高对比度模式、或者浏览器开启了强制暗色模式，可给元素加color-scheme: light强制指定色彩方案，避免系统颜色映射篡改边框色

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