结论：outline和box-shadow比border更适配不改变布局、多层边框、防hover跳动及稳定圆角场景；outline不占布局空间，适合焦点高亮与临时轮廓；box-shadow可精准模拟贴合border-radius的装饰性边框，且不触发尺寸变化。
直接说结论：当边框需要不改变布局、支持多层、避免 hover 跳动、或配合
做稳定圆角时，
和
是比
更合适的选择。
outline 替代 border 的典型场景
最适合做「焦点高亮」和「临时轮廓线」，因为它完全不参与盒模型计算，不会挤占空间、也不会影响其他元素位置。
表单控件获得焦点时用
，比加
更安全——不会让输入框突然变宽导致布局偏移
调试时临时标出某个元素：加
，不影响原有尺寸和滚动条表现
需要虚线/点线边框且不希望影响
或
时，
比
更可靠
注意：
不会跟随
圆角（所有浏览器都如此），所以圆角容器上用它，轮廓线仍是直角
box-shadow 实现 border 效果的写法
用
模拟边框，核心是把前三个参数设为
，靠第四个参数
控制“边框粗细”。
单层实线边框：
双层边框：
——逗号分隔，数值越大越靠外
内边框（贴着内容边缘）：
配合圆角：
+
，效果自然贴合，无锯齿或错位
注意：
不响应鼠标事件（比如
不会触发），也不可被
拦截，这点和
不同
为什么 hover 时 border 会跳动？box-shadow 怎么解决
因为
改变的是元素的盒模型尺寸。比如按钮默认
，
加
，宽度和高度各+2px，周围元素会被推挤。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
用
替代：
，不改变尺寸，视觉反馈一致但无抖动
更稳妥的做法是：一开始就预留空间，比如默认设
，hover 时只改颜色，但这样仍占用布局空间
如果元素本身已设
，加
可能意外触发滚动条（哪怕内容没溢出），
完全规避这个问题
真正容易被忽略的点是：三者不是互斥替代，而是分工明确——
用于定义结构边界，
用于交互状态，
用于装饰性边框。混用时尤其要注意
的负值叠加、
阴影的颜色保真度，以及多层
在高缩放下的渲染精度。
border-radiusoutlinebox-shadowborderoutlineoutline: 2px solid #007bffborderoutline: 1px dashed redbackground-clipoverflow: hiddenoutlineborderoutlineborder-radiusbox-shadow0spreadbox-shadow: 0 0 0 2px #333box-shadow: 0 0 0 2px #333, 0 0 0 4px #999box-shadow: inset 0 0 0 2px #333border-radius: 8pxbox-shadow: 0 0 0 2px #333box-shadow:hoverpointer-eventsborderborderborder: 0:hoverborder: 1px solid #000box-shadow.btn:hover { box-shadow: 0 0 0 1px #000 }border: 1px solid transparentoverflow: hiddenborderbox-shadowborderoutlinebox-shadowoutline-offsetinsetbox-shadow