border-2和border-4不能共存，因二者均设置border-width属性，后声明的border-4会覆盖前者；实现多重边框需用box-shadow（推荐，兼容圆角）、outline+border（虚实双线）或伪元素（三层及以上精细控制）。
纯 border 属性无法真正叠加——后声明的会覆盖前声明的，所谓“多重边框”必须跳出 border 本身，用盒模型其他部分借位实现。
为什么 border-2 和 border-4 不能共存？
Tailwind 或原生 CSS 中，border-2 编译为 border-width: 2px，border-4 是 border-width: 4px，两者写在同一元素上，浏览器只取最后一个生效值。这不是 Tailwind 的限制，而是 CSS 属性覆盖机制本身决定的。
-
border类只控制 width / style / color 中某一部分，不会自动补全其余属性 - 即使写
border-2 border-dashed border-blue-500 border-4，border-4仍会覆盖宽度定义 - 想模拟双线，必须用
box-shadow、outline或伪元素，而非叠加border类
用 box-shadow 实现多层实线边框（推荐）
这是目前最轻量、可控、且能跟随 border-radius 的方案。它不占布局空间，支持任意层数和颜色，Tailwind 也原生支持任意值写法。
- 语法是逗号分隔多个阴影：
shadow-[0_0_0_2px_#3b82f6,0_0_0_6px_#8b5cf6]→ 内层 2px 蓝，外层 6px 紫（总厚度 6px，两层间距 4px） - 要适配圆角？只要元素有
rounded-lg，box-shadow就会自动弯曲；但注意：扩散值（如6px）不能超过圆角值（如border-radius: 4px），否则边缘露直角 - 响应式需手动加断点前缀：
sm:shadow-[...]，Tailwind 不为 arbitrary value 自动生成响应变体 - 旧版 Safari 对
calc()在变量中参与计算支持差（如calc(var(--w) * 2)），宽度类数值建议提前算好再定义
用 outline + border 组合虚实双线
当需要一层实线 + 一层虚线时，outline 是唯一能和 border 共存且语义清晰的方案，但要注意它的硬伤。
- 必须显式设
outline-offset: 0，否则不同浏览器默认偏移不一致（Safari 可能有微小浮空） -
outline不支持border-radius，遇到圆角元素时会出现直角断裂 - Tailwind 没有
outline-offset工具类，得用内联样式：style="outline-offset: 4px" - 若父容器有
overflow: hidden，outline可能被裁剪；若父容器有transform或filter，旧版 Chrome 可能渲染错位
伪元素方案适合三层及以上或精细控制场景
当需要虚线+实线+渐变、斜切、非对称间隙，或动态更新（如进度条边框），伪元素 + linear-gradient 是目前兼容性好、控制最精细的主流做法。
- 容器必须设
position: relative，否则伪元素定位失效 - 每个方向需独立伪元素控制：顶边用
::before+background-position: top，底边用::after+background-position: bottom - 伪元素也要加
border-radius，否则圆角处漏底色 - 如果边框要动态变化（比如进度条），别改
width，改background-size和background-position，否则斜边位置会漂移
真正容易被忽略的是：所有这些方案都绕不开「盒模型层级」这个底层逻辑——border 在 content/padding 内侧，outline 在 border 外侧，box-shadow 是投影层，伪元素是绝对定位层。选哪种方案，本质是在不同层级里“借位画线”，而不是在同一个地方反复叠加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
