为何input元素的顶部与左侧边框比其他边颜色更深？

我为input元素应用了如下简单CSS样式，旨在让它的所有边都拥有统一的浅灰色细边框，但发现顶部和左侧边框颜色更深，这是否是某种阴影属性导致的？如何才能让所有边的边框保持统一样式？

现有代码 #

CSS #

input {
  border-width: thin;
  border-color: lightgray;
  box-shadow: none;
  outline: none;
}

HTML #

<input>

问题效果示意图 #

原因及解决方法 #

这不是阴影导致的，问题出在浏览器默认给input设置了border-style: inset（内凹边框样式），这种样式会通过明暗差异模拟立体效果，所以顶部和左侧看起来颜色更深。

要让边框统一，只需要显式把border-style设为solid即可，推荐直接用简写属性更简洁：

input {
  border: thin solid lightgray;
  box-shadow: none;
  outline: none;
}

也可以分开设置：

input {
  border-width: thin;
  border-color: lightgray;
  border-style: solid; /* 关键：覆盖默认的inset样式 */
  box-shadow: none;
  outline: none;
}

这样四条边的边框样式就完全一致了。

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