表单控件默认边框不统一，需用CSS显式设置border三要素（宽、样式、色），并处理outline、appearance、缩放适配及可访问性。
input、textarea 等表单控件默认无边框，需显式设置 border
HTML5 本身不提供“边框样式”属性，所有视觉边框都靠 CSS 控制。表单控件（如 <input>、<textarea></textarea>、<select></select>）在不同浏览器中默认 border 值不同——Chrome 可能是 1px solid #ccc，Firefox 可能带阴影或圆角，Safari 甚至默认 border: none。不写 CSS 就指望“实线”，大概率失效。
最简生效写法：
input, textarea, select {
border: 1px solid #000;
}
- 必须指定三要素：
width（如1px）、style（必须是solid，dashed或dotted不算“实线”）、color（不能省略，否则部分浏览器回退为 transparent） - 避免只写
border: solid——缺少宽度和颜色，实际无效 - 若用
border: 1px solid，部分旧版 IE 会将 color 解析为currentColor，但不可依赖
解决 outline 干扰导致“双线”假象
用户点击 <input> 后常看到一圈蓝色或黄色虚线/实线，那是浏览器默认的 outline，不是 border。它叠加在你设的实线上，形成“加粗”或“偏移”的错觉，尤其在移动端 Safari 上明显。
- 清除方法：加
outline: none，但务必同步提供焦点态替代方案（例如box-shadow），否则可访问性违规 - 更稳妥写法：
input:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 120, 215, 0.3); } - 切勿全局写
*:focus { outline: none }——破坏键盘导航体验
兼容性陷阱：border-radius 和 appearance 会吃掉边框
某些控件（尤其是 <select></select> 或 type="number" 的 <input>）在 Chrome/Firefox 中受 appearance 影响，即使写了 border，也可能被系统控件样式覆盖；而 border-radius: 4px 若值过大，配合细边框时在高分屏上易出现抗锯齿模糊，看起来像“虚线”。
立即学习“前端免费学习笔记（深入）”；
- 强制接管渲染：加
-webkit-appearance: none; -moz-appearance: none; appearance: none;（注意：<select></select>加了之后需手动补箭头图标） - 边框清晰度优化：用
border: 1.5px solid #333比1px在 Retina 屏更稳（CSS 支持小数像素） - 避免
border-radius: 50%配border: 1px——圆角交点处易发虚，建议最小半径 ≥ 边框宽度的 2 倍
响应式场景下，border 宽度别硬写 px
在移动设备缩放或动态字号（如用户设置“更大文本”）时，固定 1px 边框可能过细到看不见，或与文字大小严重失配。
- 推荐用
border: 0.0625rem solid #333（即 1px 在 16px 基准下），rem 单位随根字体缩放 - 或用
border-width: thin（浏览器定义为约 1px，但语义更强，且部分 UA 会适配系统偏好） - 慎用
border-image：虽灵活，但在表单控件上兼容性差，iOS Safari 基本不支持
真正难的不是加一条实线，而是让这条线在各种输入状态、缩放级别、操作系统主题下始终清晰、稳定、可访问。漏掉 focus 处理或 appearance 重置，往往比没加边框更糟。
