必须同时设置 outline: none（在 :focus 中）和 -webkit-appearance: none（ios safari）、-moz-appearance: none（firefox），并检查表格继承边框及慎用 all: unset。
直接写 border: none 不够，必须连带处理 outline
只设 border: none 后，用户点击文本框时边框“又回来了”，这是浏览器默认的焦点轮廓（outline）在作祟。Chrome、Firefox 默认加蓝色或黑色虚线，不是 border，所以改 border 毫无作用。
实操建议：
- 必须同时声明
outline: none，且最好写进:focus伪类里，而不是只写在默认状态 - 若需保留可访问性（比如键盘 Tab 导航），别删
outline，改用outline: 2px solid #007bff+outline-offset: 2px做更可控的替代 - 检查是否被 CSS 框架（如 Bootstrap）注入了
input:focus规则——用开发者工具的 “Computed” 面板看最终生效值
input 在 iOS Safari 上仍发灰？补上 -webkit-appearance: none
iOS Safari 对 <input type="text"> 有额外渲染逻辑：即使 border: none 和 outline: none 都写了，也可能因系统级外观残留导致边缘泛灰、发虚，尤其在浅色背景上明显。
实操建议：
- 加上
-webkit-appearance: none禁用 WebKit 原生样式 - Firefox 需配
-moz-appearance: none，否则某些版本会忽略border: none - 顺手加
background: #fff（或明确背景色），避免透明背景放大渲染瑕疵 - 别依赖
border-color: transparent——border-width还在，占空间，且语义上仍是“有边框”
表格内文本框边框没清干净？查 th 和 td 的继承边框
把 input 放进表格后，即使它自己 border: none，看起来还是有“线”，大概率是 th 或 td 自带边框，或者 border-collapse: collapse 没关好，导致单元格边框压到 input 上。
实操建议：
- 显式重置表格结构：
table, th, td { border: none; } - 确认没漏掉
border-collapse: separate（默认值）干扰；如用了collapse，记得th/td的边框也得单独清 - 用浏览器“Computed Styles”逐层点开
input→td→table，看哪一层的border计算值不是none
全局清边框时，all: unset 要慎用
有人图省事写 * { all: unset; } 或 input { all: unset; }，结果发现 input 高度塌陷、文字错位、甚至无法聚焦——因为 all: unset 会把 box-sizing、font、line-height 全部重置，不只是边框。
实操建议：
- 优先用精准选择器：
input, textarea, select { border: none; outline: none; } - 真要用
all，选all: revert更安全，它回退到浏览器 UA 样式，不会清掉关键排版属性 - 如果用了
all: unset，必须手动补全：box-sizing: border-box、font: inherit、padding: 4px等基础样式
聚焦状态和移动端渲染是两个最常被跳过的环节，光看静态效果容易误判“已经去掉了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
