Input元素border-color样式异常：深绿线条而非全浅绿问题咨询

为.contact .contact-content下的input[type=text]元素设置border-color: rgb(0, 255, 72)后，出现深绿色线条，而非预期的全浅绿色，请问原因是什么？

相关CSS代码 #

.contact .contact-content input[type=text]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-color: rgb(0, 255, 72);
border-radius: 5px;
border-width: 3px;
font-family: 'Poppins', sans-serif;
}

问题截图 #

输入框边框异常效果

原因及解决方法 #

这是因为仅设置border-color时，浏览器会采用默认的border-style: inset样式，这种内置样式会让边框呈现出类似浮雕的深浅渐变视觉效果，导致你看到深绿色线条。

解决方式有两种：

• 使用border简写属性，一次性定义边框的样式、宽度与颜色：

.contact .contact-content input[type=text]{
  /* 保留原有其他属性 */
  border: 3px solid rgb(0, 255, 72);
}

• 单独添加border-style: solid属性，明确指定边框为纯色样式：

.contact .contact-content input[type=text]{
  /* 保留原有其他属性 */
  border-color: rgb(0, 255, 72);
  border-width: 3px;
  border-style: solid;
}

执行以上任一修改后，就能得到预期的纯色浅绿色边框。

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