初学者常遇到输入框（input）边框颜色不一致的问题，这是因为浏览器默认使用 inset 边框样式，导致视觉上出现明暗分界；只需显式设置 border-style: solid 并配合 border-color 即可实现全边统一浅灰色边框。
初学者常遇到输入框（input）边框颜色不一致的问题，这是因为浏览器默认使用 `inset` 边框样式，导致视觉上出现明暗分界；只需显式设置 `border-style: solid` 并配合 `border-color` 即可实现全边统一浅灰色边框。
在 HTML 表单控件中，<input> 元素（包括文本框）在未显式定义边框样式时，会继承浏览器的用户代理样式表（User Agent Stylesheet） 默认值。其中关键一点是：border-style 的默认值为 inset（内凹效果），而非直观的 solid。inset 样式会根据边框颜色自动模拟 3D 凹陷感——它实际上由四条不同明暗的边组成（上/左偏亮，下/右偏暗），因此即使你只设置了 border-color: rgb(159, 159, 159)，视觉上仍会呈现“半黑半灰”的错觉，实则是同一颜色在不同方向上的光照模拟。
要彻底解决该问题，必须同时声明边框样式与颜色。推荐做法是在 CSS 中为 .search 类添加 border-style: solid，并建议进一步使用简写属性 border 统一控制，提升可维护性：
.search {
width: 600px;
padding: 10px 0 10px 15px; /* 合并垂直内边距 */
text-align: left;
font-size: 20px;
border-radius: 50px;
border: 1px solid rgb(159, 159, 159); /* ✅ 关键：solid + color 一次性定义 */
box-shadow: 10px 5px 5px rgb(202, 202, 202);
}⚠️ 注意事项：
-
type="textbox"并非标准 HTML 属性（应使用type="text"或直接省略，默认即为文本输入）； - 若需更高兼容性或精确控制，可额外重置
border-width（如1px）和border-image（设为none）； - 避免仅依赖
border-color：CSS 中border-color、border-width、border-style三者缺一不可，任一未声明则回退至浏览器默认值。
总结：统一边框颜色的本质，是打破浏览器默认的 inset 渲染逻辑。通过显式指定 border-style: solid（或使用 border 简写），你就能完全掌控边框的视觉表现——这是前端开发中「显式优于隐式」原则的典型实践。
立即学习“前端免费学习笔记（深入）”；
