border: none 有时清不掉边框，因“边框”可能来自 outline、box-shadow、父容器投影或表单控件默认 appearance；需配合 outline: none、appearance: none 并检查真实来源。
为什么 border: none 有时清不掉边框？
不是所有“看起来像边框”的东西都来自 border。常见误判是把 outline、box-shadow、父容器的 border 投影、甚至表单控件（如 input）的浏览器默认 appearance 样式当成边框。尤其在 Chrome/Firefox 中，input 和 button 默认带 outline 或内建轮廓，border: none 对它完全无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先用开发者工具「检查元素」，看真正生效的边框样式来自哪个 CSS 属性（
border/outline/box-shadow） - 对表单控件，必须同时写：
border: none; outline: none; appearance: none; - 若用
box-shadow模拟边框（比如浅灰底色+深灰阴影），清除时别漏掉box-shadow: none;
border: 0 和 border: none 有区别吗？
有，但只在极少数场景下影响渲染结果。两者都能移除边框视觉表现，但语义不同：border: none 明确声明“不绘制边框”，而 border: 0 是将宽度设为 0，仍保留边框样式和颜色（只是宽为 0）。大多数现代浏览器表现一致，但某些旧版 Safari 或打印样式中，border: 0 可能触发意外的盒模型计算或伪元素继承问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
border: none—— 更准确表达意图，避免歧义 - 不要混用：比如
border-width: 0; border-style: solid;，这会留一个不可见但占布局空间的“空边框” - 如果要重置整个边框，优先写完整简写：
border: none;，而非只设某一项
扁平化设计里，去掉边框后怎么维持可点击/可聚焦感知？
无边框 ≠ 无交互反馈。直接删掉 border 后，按钮、输入框常变得“看不见焦点”，键盘用户无法判断当前操作位置，也违反 WCAG 基础可访问性要求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
outline替代边框做焦点提示，但需控制样式：outline: 2px solid #007bff; outline-offset: 2px; - 禁用
outline: none除非你提供了等效的焦点样式（比如box-shadow: 0 0 0 3px rgba(0,123,191,0.25);） - 对鼠标悬停态，别只靠颜色变化——加
background-color+transform: translateY(-1px)或轻微box-shadow更可靠
全局重置边框时，哪些元素容易被误伤？
用通配符如 * { border: none; } 看似省事，实际会破坏很多依赖边框实现基础功能的元素：表格单元格（td）、hr、自定义下拉箭头（常靠 border-top/border-bottom 绘制三角）、甚至某些图标字体的对齐逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免全局重置，改用组件级控制，例如只对
.btn-flat、.input-plain类应用border: none - 如需重置表单控件，默认样式可针对范围更小的选择器：
input, select, textarea, button { border: none; } - 保留
img的border重置（历史遗留的图片边框 bug），但现代项目中几乎不用：img { border: none; }
扁平化真正的难点不在“去边框”，而在“去边框之后，如何用其他方式传递结构、层级和状态”。很多人卡在视觉反馈缺失或可访问性断层上，而不是 CSS 写法本身。
