border-style: double 是 css 唯一原生支持的双边框样式，由两条等宽实线加中间等宽空白构成，总宽度等于 3 × border-width；必须同时指定像素值 border-width 和 border-color，不支持 thin/medium、不兼容 border-radius、不可单边设置。
border-style: double 是唯一标准解法
HTML 本身不提供双边框语法，border-style: double 是 CSS 唯一原生支持的“双边框”样式，不是视觉模拟，而是规范定义：两条等宽实线 + 中间等宽空白，总宽度 = 3 × border-width。比如 border: 2px double #000 实际占用 6px 高度/宽度。
必须同时指定 border-width（建议 ≥ 2px）和 border-color，缺一不可；border-style: double 不接受 thin/medium 等关键字宽度，只认具体像素值或百分比。
- 不能和
border-radius共存——圆角处双线会断裂或错位，Chrome 和 Firefox 渲染不一致 - 不支持单边设置：不能写
border-top-style: double同时其他边用solid，除非四边分别声明border-top/border-right等完整简写 - 内联样式必须写全：
<button style="border: 2px double #333"></button>，只写style="border-style: double"不生效
box-shadow 模拟多层实线边框
当需要 >2 层、带圆角、或每层颜色/粗细独立控制时，box-shadow 是实际首选。它本质是绘制多个“影子矩形”，通过第四个参数 spread 控制扩张大小，实现无间隙实线边框。
box-shadow: 0 0 0 2px #000, 0 0 0 4px #f00, 0 0 0 6px #0f0 表示三层同心实线，每层宽度 = 相邻 spread 差值（2px / 2px / 2px）。注意：所有阴影都基于元素原始尺寸生成，border-radius 会自然传导到每层阴影上。
- 第一层
spread值决定最内层边框粗细，后续值必须严格递增，否则外层会覆盖内层 - 不能模拟虚线、点线等非实线样式——
box-shadow只支持实色填充 - 阴影不占布局空间，不影响
box-sizing计算，但叠加过多层可能轻微影响渲染性能（通常 ≤5 层无感） - hover 动画可直接过渡
box-shadow值，比操作多层伪元素更稳定
outline + border 组合实现双层异构边框
想让外层是虚线、内层是实线，或两层不同颜色/粗细且互不干扰，outline 是最轻量方案。它绘制在 border 外围，不参与盒模型计算，也不受 border-radius 影响（但自身不圆角）。
关键要配 outline-offset 控制间距：border: 1px solid #000; outline: 2px dashed #f00; outline-offset: 4px 能清晰分离两层。注意 outline-offset 为负值会让 outline 向内收缩，可能遮盖 border。
-
outline无法设置border-top-style类独立边，只能四边统一 - Firefox 下
outline默认有轻微模糊，可用outline: solid强制锐利边缘 - 键盘 focus 时
outline自动触发，若禁用需补box-shadow或border确保可访问性 - IE8 及以下不支持
outline-offset，老项目慎用
伪元素方案适合非对称或动画边框
当需要左/上边框生长、仅三边显示、或每边独立动画时，::before/::after 是唯一可控路径。典型做法是绝对定位伪元素，用 width/height + border 绘制局部线段。
例如左上角双边框效果：.btn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; border-top: 2px solid #000; border-left: 2px solid #000; }，再配合 transition: all 0.3s 实现 hover 生长。
- 必须给宿主元素设
position: relative，否则伪元素定位失效 - 伪元素默认不继承
border-radius，需单独设置border-radius: 4px等 - IE8 不支持
::before伪元素（需用:before单冒号写法兼容） - 每多一层伪元素就多一次渲染，复杂动画建议用
transform替代width/height变更
真正麻烦的不是写法，而是判断哪一层该用什么技术：双线语义选 double，圆角多层选 box-shadow，异构边框选 outline，动态局部边框才值得动用伪元素——混用容易导致层叠顺序错乱或焦点行为异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
