border: none 是去边框最稳妥的写法，因它明确禁用边框绘制，而 border: 0 或 border-color: transparent 会遗留样式或宽度导致“影子边框”；还需同步处理 outline、appearance 及 background 才能彻底控制按钮边框表现。
border: none 是去边框最稳妥的写法
只写 border: 0 或 border-color: transparent 很容易留“影子边框”：前者是 border-width: 0 的简写，但没动 border-style，后者边框依然存在（宽度和样式没清），可能干扰盒模型或触发意外 focus 行为。border: none 明确告诉浏览器“不绘制边框”，语义清晰、兼容性好，现代项目应首选。
但仅靠这一句不够——点击后常出现的蓝环不是边框，是 outline；Chrome/Safari 还可能残留系统级内阴影，那是 appearance 在起作用。
- 必须同步处理
outline：用outline: 2px solid #007bff替代outline: none，既消除默认蓝环，又保键盘可访问性 - 加
-webkit-appearance: none和-moz-appearance: none，再补appearance: none，才能关掉浏览器原生控件样式 - 若按钮背景透明，记得加
background: transparent，否则默认背景色会掩盖效果
调边框粗细必须带 border-style
只设 border-width: 2px 没用，因为浏览器默认把按钮的 border-style 设为 none。宽度再大，样式为 none 就等于没画线。DevTools 里看 computed 样式，重点查 border-top-style 是否为 solid 或其他非 none 值。
- 推荐用
border简写一次性写全：border: 2px solid #333✅；border: 2px #333❌（缺 style）；border: solid #333❌（缺 width，浏览器按不可控的medium渲染） - 想某一边加粗（比如右框），得先确保整体有
border-style: solid，否则border-right-width: 3px仍不生效 - 重置库（如 normalize.css）有时把按钮
border-style设成hidden，比none更彻底，连宽度都不认，调试时可临时加border-style: solid !important验证
实现细边框的五种实际路径
要做出视觉上“纤细”的边框线，不能只盯着 border-width: 1px。高 DPI 屏幕下 1px 可能渲染成 2 物理像素，显得粗；某些设计还要求非对称或聚焦态独立线条。以下是真正可用的方案：
-
border: 1px solid #ccc：最直白，适合多数场景，但注意配background: transparent避免灰度感 -
box-shadow: 0 0 0 1px rgba(0,0,0,0.1)：用阴影模拟超细线，不占布局空间，缩放友好，hover 时改box-shadow颜色即可强化 -
outline: 1px solid #007bff（仅用于:focus）：专注可访问性，不影响常态尺寸，必须配outline-offset: 0 - ::before 伪元素绝对定位画线：能控制每条边独立粗细/颜色/圆角，适合非对称设计，但需父元素加
position: relative -
border-image：支持渐变、纹理边框，但兼容性略弱，旧版 Safari 对 SVG 边框支持不稳定
圆角 border-radius 不生效的三个硬伤点
border-radius 看似简单，但常被忽略的前提条件让它“静默失效”：
- 元素没背景色或边框：圆角只裁剪可见区域，
background: transparent+border: none的按钮，圆角就藏在空气里，先加background-color或border才能看到效果 - 圆角值超过宽高一半：一个
40px宽的按钮设border-radius: 30px，实际等效于20px，浏览器会自动折算，别指望它更圆 - 父容器 overflow: hidden 裁切：如果按钮嵌在
overflow: hidden的卡片里，过大的圆角会被直接截掉，检查父级样式比调按钮本身更有效
真正干净的按钮边框控制，从来不是单点修改，而是 border、outline、appearance 三者协同；任何一环漏掉，都可能在某个浏览器、某种交互状态或某次缩放后露出破绽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
