去边框需同时设 border: none 和 outline: none（后者须配合 :focus），并提供替代焦点反馈（如 box-shadow）；保留 border-bottom 是常用折中方案；禁用全局 * { border: none }，应限定作用域。
input 去边框必须同时处理 border 和 outline
只写 border: none 或只写 outline: none 都不完整，浏览器默认会同时渲染两者：border 是元素自身的边框，outline 是聚焦（focus）时的辅助轮廓。漏掉任意一个，都会在点击或 Tab 切换时突然冒出蓝色/黑色边框，尤其 Chrome/Firefox 对 input:focus 的 outline 有强默认样式。
-
border: none移除物理边框（含所有四边），语义清晰，推荐优先使用；border: 0虽视觉等效，但在旧 Safari 或打印样式中可能残留盒模型影响 -
outline: none必须配合 :focus 伪类使用，单独写在全局input { outline: none }会禁用所有焦点提示，损害可访问性 - 若用
appearance: none（尤其针对 Safari/Chrome 的原生 input 样式），建议一并加上，避免系统控件自带边框干扰
去掉边框后焦点状态必须提供替代反馈
移除 outline 后，键盘用户无法感知当前聚焦位置，这违反 WCAG 2.1 AA 级可访问性要求。不能简单“删了就完事”，得用其他视觉方式补上焦点指示。
- 用
box-shadow替代 outline：例如input:focus { box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25); }，比 outline 更可控、不偏移布局 - 慎用
outline-offset：设为负值可能裁剪阴影，正值又拉远距离，不如直接用box-shadow+outline: none组合更稳定 - 鼠标悬停态别只改
background-color——加transform: scale(1.02)或轻微box-shadow，能强化交互意图
border-bottom 单线样式是无边框输入框最常用方案
纯无边框易导致输入框“消失”在页面中，尤其浅色背景上。保留底部一条细线（border-bottom）是兼顾扁平化与可用性的折中解法，但要注意它和原始 border 的叠加逻辑。
- 先重置完整边框：
border: none，再单独声明border-bottom: 1px solid #ccc，避免border-bottom被继承的border-style干扰 - 若父容器有
border-collapse: collapse（如表格内嵌 input），border-bottom可能被吞掉，此时改用box-shadow: inset 0 -1px 0 #ccc更可靠 - placeholder 文字颜色常被忽略：加
input::placeholder { color: #999; }，否则在无边框下更难辨识输入区
全局重置 * { border: none } 是危险操作
通配符重置看似省事，实际会破坏大量依赖 border 实现基础功能的元素，且难以排查。
立即学习“前端免费学习笔记（深入）”；
-
hr、table td、fieldset、自定义下拉箭头（靠border-top/border-bottom画三角）全部失效 - 某些图标字体（如 Font Awesome）用 border 控制对齐或伪元素边框，
* { border: none }会导致图标错位或消失 - 真正需要“统一去边框”的场景，应限定作用域，例如
.form-flat input, .form-flat textarea，而非全局污染
真正难的不是写 border: none，而是判断哪些地方该留边、哪些该换反馈、哪些根本不能动。border 和 outline 的职责不同，混着清或漏着清，最后都在 QA 或残障测试阶段暴露。
