按钮border常“看不见”是因为浏览器默认使用outset等立体样式视觉弱化，或开发者漏写border-style（默认为none），而border必须width+style+color三者齐全才生效。
按钮外边框不是靠 outline，也不是靠 box-shadow 模拟出来的“假边框”，而是用 border 属性真正画在元素边缘的那条线——它参与盒模型计算、影响布局、响应 border-radius，且必须显式声明样式才能显示。
为什么 button 的 border 经常“看不见”？
浏览器默认给 <button> 加了 border: 2px outset #cccccc（或类似值），但这个 outset 是立体样式，在浅色背景下视觉上接近“无边框”。更常见的是开发者写了 border-color: transparent 或只设了 border-width 却漏掉 border-style，导致边框完全不渲染。
-
border是复合属性，width+style+color缺一不可；只写border: 1px #333不生效 - 常见错误写法：
border: 1px; border-color: #666;→ 缺border-style，默认为none - 调试时可临时加
border: 1px solid red !important;快速验证是否被其他 CSS 覆盖
设置 button 外边框的三种可靠写法
不要依赖继承或简写模糊性，明确控制每条边。以下写法均作用于按钮的“外轮廓”（即 content box 最外层）：
- 统一四边：
border: 1px solid #ddd;—— 最常用，兼容所有浏览器 - 单独上边：
border-top: 2px dashed #999;—— 适合做强调线或分割线效果 - 仅保留右边框：
border: none; border-right: 1px solid #eee;—— 避免重置全部再补，更安全
border 和 outline 在按钮上的本质区别
很多人把键盘聚焦时的蓝圈当成“边框”，那是 outline，和 border 完全不是一回事：
立即学习“前端免费学习笔记（深入）”；
-
border占据空间，受box-sizing控制，会随border-radius圆角，能设不同边宽/样式 -
outline浮在元素上方，不占布局空间，不响应border-radius，无法单独设某一边（只能全有或全无） - 想让焦点轮廓也圆角？不行。但可以关掉
outline，改用border+:focus模拟：button:focus { outline: none; border-color: #007bff; }
高 DPI 屏幕下细边框发虚怎么办？
1px 在 Retina 屏上实际是 2 物理像素，但浏览器缩放可能让 border: 1px 渲染成亚像素线，看起来模糊或断续：
- 优先用
border: 1px solid #000+ 确保父容器未触发 subpixel 渲染（如避免 transform 缩放） - 若必须超细视觉效果，改用
box-shadow: 0 0 0 0.5px #000（注意：0.5px 是合法值，现代浏览器支持） - 禁用
border-image或border-width小数（如0.7px），它们在部分安卓 WebView 中表现不稳定
真正控制按钮外边框，核心就一条：别绕开 border，别省略 border-style，别混淆 outline 的语义。其它都是围绕它做的微调。
