CSS设置input边框为纯色时显示半深半浅渐变效果问题咨询

问题原因 #

你遇到的边框渐变效果是浏览器原生表单的默认样式导致的：绝大多数浏览器的<input>控件默认border-style属性值为inset（内凹）或outset（外凸），这种样式本身通过明暗双色模拟立体效果，你仅单独设置了border-color，没有修改默认边框样式，就会出现纯色设置变为渐变的现象。

解决方案 #

• 优先使用border缩写属性一次性覆盖默认样式，将你代码中的border-color: red;替换为border: 1px solid red;，明确指定边框宽度、实心样式、边框颜色，即可获得均匀的纯色边框。如果需要保留原有默认边框宽度，也可以单独添加border-style: solid;声明。
• 如果修改后仍有异常，可添加appearance: none;以及兼容前缀-webkit-appearance: none;，清除浏览器自带的表单控件原生渲染规则，完全接管样式控制权。
• 额外注意你当前的SCSS代码存在选择器错误：根选择器add-form缺少类选择器的.标识，正确写法应为.add-form，否则样式无法命中对应元素。

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