只写 border: none 无法实现纯下划线效果，必须同时清除 outline、显式设置 border-bottom，并用 box-shadow 或高对比 outline 替代焦点样式以保障可访问性。
直接去掉 border 并不等于只留下一条下划线——漏掉 outline 会导致点击后出现难看的焦点环，漏掉 border-bottom 的显式声明则可能让下划线根本不出现在某些浏览器中。
为什么只写 border: none 还有“边框”？
你看到的“点击后冒出来的蓝/黄框”，大概率不是 border，而是浏览器默认给 input:focus 加的 outline。它独立于边框、不占布局空间、且无法通过 border 属性控制。
-
border控制元素本身的边框（默认是1px solid #999） -
outline是焦点状态下的额外轮廓，Safari 和 Firefox 对input[type="search"]还有私有内边距和圆角，需额外重置 -
border: 0和border: none视觉一致，但语义不同：none是推荐写法，0只设宽度，旧 IE 有兼容隐患
只显示下划线的 CSS 写法（含可访问性兜底）
必须同时处理 border、outline 和 border-bottom，否则要么没下划线，要么键盘用户无法识别焦点位置。
- 清空全部边框：
border: none - 显式定义下边框：
border-bottom: 1px solid #ccc（别只靠border-bottom: 1px，缺颜色在部分浏览器下不渲染） - 替换而非删除
outline：outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3)，确保对比度 ≥ 3:1 - 补充重置：
background: transparent避免默认背景干扰线条感；padding-bottom: 4px让文字不贴底
常见错误与兼容性注意点
看似一行样式，实际跨浏览器表现差异不小，尤其在 Safari 和旧版 Edge 中。
立即学习“前端免费学习笔记（深入）”；
- 别用
border: transparent：边框宽度和样式仍存在，可能触发意外盒模型计算或 focus 行为 - 别全局写
* { outline: none }：会破坏所有可聚焦元素的键盘导航体验 - Safari 对
input[type="search"]有私有-webkit-appearance: textfield和内边距，需加-webkit-appearance: none - 如果项目强制禁用所有焦点样式，至少保留
outline: 2px solid #007bff这类高对比实线
最易被忽略的是：去掉边框后不提供替代焦点指示，等于让键盘用户完全“失明”。务必用 box-shadow 或高对比 outline 替代，而不是消灭它。
