实现多重边框需借位盒模型：box-shadow最轻量但不响应事件；outline+border可混用样式但不圆角；伪元素最灵活但需手动定位和同步border-radius。
纯 border 只能画一层，要实现双色、斜切、内嵌、圆角贴合的多重边框，必须跳出 border 本身，用盒模型其他部分“借位”实现。
用 box-shadow 模拟多层实线边框（最轻量）
它不占布局空间、支持多层、兼容性好（IE9+），但本质是投影，不能响应鼠标事件，也不支持虚线或双线样式。
- 写法顺序决定图层：后写的阴影在视觉上更靠外，比如
box-shadow: 0 0 0 2px #333, 0 0 0 6px #eee表示内圈 2px、外圈总宽 6px（即外圈厚度为 4px） - 要加内边框？用
inset：比如inset 0 0 0 2px #666放最前面 - 有
border-radius时，spread值（如6px）必须 ≤ 圆角值（如border-radius: 8px），否则边缘会露直角 - 旧版 Safari（13–14.4）对多层
inset支持不稳定，此时应换伪元素方案
用 outline + border 搭配双线（仅限两层）
这是唯一能同时用两种不同 border-style（如实线 + 虚线）的原生组合，但 outline 不响应 border-radius，且渲染位置存在跨浏览器偏差。
- 必须显式设
outline-offset控制间距，Tailwind 无对应工具类，得用内联样式：style="outline-offset: 4px" -
outline永远是直角矩形，哪怕元素是rounded-lg，视觉上也会断裂 - 缩放或 subpixel 渲染下，
outline容易和border粘连或抖动，尤其在 DPR > 1 的设备上 - 不要依赖
outline做交互热区——它不参与事件捕获，hover 无法单独触发外圈
用伪元素（::before/::after）实现可控三层+边框
这是唯一能真正独立控制每层样式、圆角、变换和交互的方案，但需手动定位，且伪元素必须设 content: "" 才渲染。
- 父容器必须设
position: relative，否则伪元素会相对 body 定位 -
::before画外层：用负偏移扩出尺寸，如top: -3px; left: -3px; right: -3px; bottom: -3px; -
::after画内层：用正向padding或缩小尺寸，再设更高z-index - 每层都要单独加
border-radius，否则圆角处会漏底色 - 移动端高 DPR 下边框发虚？别放大像素值，改用
transform: scale(0.5)配合transform-origin: center
Tailwind CSS 中怎么写多重边框？
Tailwind 的 border-{n} 类互斥覆盖，无法叠加；官方没提供多重边框原子类，必须组合底层 CSS 机制。
- 推荐用
shadow-[...]：例如shadow-[0_0_0_2px_#3b82f6,0_0_0_6px_#8b5cf6]实现双层实线 - 想混用虚线+实线？只能用
border+outline组合，但要手写outline-offset - 三层及以上？Tailwind 不生成伪元素类，得在
@layer components里手写 CSS - 任意值（arbitrary value）不自动响应式，
sm:shadow-[...]需手动加断点前缀
最容易被忽略的是圆角与扩展半径的匹配关系：哪怕只差 1px，box-shadow 边缘就可能断裂；而伪元素方案里，border-radius 忘记同步加到每个伪元素上，圆角处就会穿帮。这些细节不调试到真实设备上看，很难发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
