HTML 中 默认使用 inset 边框样式，导致 border-color 仅部分生效（如半黑半灰），需显式声明 border-style: solid 才能完整应用自定义颜色。
html 中 `` 默认使用 `inset` 边框样式，导致 `border-color` 仅部分生效（如半黑半灰），需显式声明 `border-style: solid` 才能完整应用自定义颜色。
在初学 HTML/CSS 时，常会遇到输入框（<input>）边框颜色显示不一致的问题：明明设置了 border-color: rgb(159, 159, 159)，但实际渲染效果却是左侧/上侧偏黑、右侧/下侧偏灰——这并非浏览器 Bug，而是源于浏览器默认样式的底层机制。
根本原因在于：所有现代浏览器对 <input> 元素均预设了 border-style: inset（内嵌式边框）。inset 是一种三维拟真边框样式，它通过不同方向的阴影和明暗变化模拟凹陷效果，因此即使指定了单一 border-color，浏览器仍会自动计算并渲染出深浅不一的边缘色（类似高光与阴影），从而造成“半黑半灰”的视觉错觉。
✅ 正确解法是覆盖默认边框样式，显式声明 border-style: solid：
.search {
width: 600px;
padding: 10px 0 10px 15px; /* 合并垂直内边距 */
text-align: left;
font-size: 20px;
border-radius: 50px;
border-color: rgb(159, 159, 159); /* 目标浅灰色 */
border-style: solid; /* ✅ 关键修复：禁用 inset，启用纯色边框 */
box-shadow: 10px 5px 5px rgb(202, 202, 202);
}⚠️ 补充注意事项：
立即学习“前端免费学习笔记（深入）”；
-
type="textbox"并非标准 HTML 属性（应使用type="text"或直接省略，因<input>默认即为文本输入）； - 建议同时设置
border-width（如border-width: 1px）以确保边框粗细可控； - 为提升兼容性与可维护性，推荐使用简写属性
border：border: 1px solid rgb(159, 159, 159);
- 若需彻底重置所有默认样式（尤其在构建 UI 组件库时），可配合
all: unset或 CSS Reset 策略，但日常开发中精准覆盖更安全。
掌握这一细节，不仅能解决当前的边框颜色问题，更能帮助你理解浏览器默认样式（User Agent Stylesheet）的工作逻辑——这是迈向 CSS 精准控制的重要一步。
