border:none有时删不掉边框，是因为看到的“边框”实为outline、box-shadow、父容器溢出边框或表单默认轮廓；需用开发者工具排查并针对性清除。
border:none 为什么有时候删不掉边框？
直接写 border: none 却仍有“边框感”，大概率不是 CSS 没生效，而是你看到的压根不是 border —— 很可能是 outline、box-shadow、父容器的 border 溢出，或是表单元素（如 input、button）自带的浏览器默认轮廓线。
实操建议：
- 用浏览器开发者工具「强制禁用所有 outline」：在 Styles 面板里勾选
outline: none或临时加* { outline: none !important }快速排查 - 检查是否用了
box-shadow: 0 0 0 1px ...模拟边框，这种不能靠border: none清除 - 对
input等表单控件，要同时写border: none; outline: none;，否则聚焦时仍会显示蓝色/黑色环
border: 0 和 border: none 到底有啥区别？
二者视觉效果一致，但底层行为不同：border: 0 是把宽度设为 0，边框依然存在（占用盒模型空间、可被继承、支持 border-color 和 border-style）；而 border: none 是彻底移除边框渲染，不参与盒模型计算，也不触发任何边框相关属性。
常见错误现象：
- 写了
border: 0后，border-color: red仍生效（只是看不见），但border: none下再设颜色无效 - 用
border: 0的元素在某些旧版 Safari 中仍可能撑开padding区域，而none更干净 - 如果后续 JS 动态改
borderStyle，border: 0更容易复原（只需改 style，不用重设 width）
去掉边框后盒子尺寸突变？小心 box-sizing 和 border-box 的陷阱
当元素原本有 border: 1px solid #ccc，又突然加 border: none，宽度/高度可能“收缩”——这不是 bug，是 box-sizing: content-box（默认值）的正常表现：边框原本算在总尺寸外，删掉后内容区没变，但整体占位缩小了。
解决思路：
- 统一设
box-sizing: border-box，让 padding + border 都包含在 width/height 内，删边框就不会影响布局流 - 如果无法改全局
box-sizing，可手动补偿：比如原width: 200px; border: 1px，删边框后加width: 202px（仅限固定宽高场景） - Flex/Grid 布局中，删边框一般不影响排列，但若依赖
min-width或flex-basis计算，仍需确认是否含 border
:focus-visible 时代，该不该无脑清 outline？
现代可访问性要求下，盲目写 outline: none 已不推荐。用户靠键盘 tab 导航时，失去焦点指示会极大降低可用性。
更稳妥的做法：
- 用
:focus-visible替代:focus：只在键盘触发焦点时显示轮廓，鼠标点击时不出现 - 自定义 outline 样式比粗暴清除更友好，例如：
outline: 2px solid #007bff; outline-offset: 2px; - 如果真要隐藏，至少提供替代方案：比如加
box-shadow或背景色变化，并确保对比度 ≥ 4.5:1
真正难处理的，是那些既需要视觉“无边框”又得满足无障碍要求的组件——这时候得权衡设计语言和合规底线，而不是只盯着 border: none 这一行代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
