用box-shadow或伪元素+background配合CSS变量实现多层边框，box-shadow轻量易控但需注意spread与border-radius关系，伪元素更可控但需显式设圆角，border-image因变量不友好且兼容性差而不推荐。
纯 border 只能定义一层样式，想用变量控制多层边框，必须放弃“堆叠多个 border”的直觉，转而用 box-shadow 或伪元素 + background 配合变量——否则变量无法动态驱动层数、颜色或间距。
用 box-shadow 实现可变层数的多边框
box-shadow 是最轻量、最易用变量控制的方案，它天然支持逗号分隔的多层叠加，且不占布局空间、不影响盒模型计算。
- 每层阴影对应一层“视觉边框”：写成
0 0 0 <spread><color></color></spread>形式，spread控制厚度，color控制颜色 - 变量必须显式声明在元素上（不能只靠
:root），例如：element { --border-1-spread: 2px; --border-1-color: #e74c3c; } - 关键帧动画中更新变量值时，
@keyframes内必须完整写出每层阴影，不能只改某一层——浏览器不会做“差分合并” - 圆角场景下，
spread值不能超过border-radius，否则边缘会露直角；建议统一设border-radius: var(--radius-md)，再让--border-1-spread≤ 其值
用伪元素 + background 模拟带圆角的多层边框
当需要精确控制每层边框的圆角、渐变或响应式缩放时，box-shadow 力不从心，此时伪元素是更可控的选择。
- 主元素设
position: relative和border-radius，伪元素用inset: -<width></width>向外撑出边框区域 - 每层边框对应一个伪元素（如
::before、::after），通过z-index控制叠放顺序 - 边框颜色/宽度用变量传入：
.multi-border::before { background: var(--border-inner-color); height: var(--border-inner-width); } - 别在伪元素上直接写
border-radius: inherit——必须显式设相同值，否则 Safari 可能漏渲染圆角
border-image 不适合变量驱动的多层边框
虽然 border-image 理论上支持“图案化边框”，但它对变量极其不友好，且与圆角、高 DPR 屏幕存在系统性冲突。
-
border-image的渐变声明（如linear-gradient()）必须整条存为一个变量，不能拆解方向或颜色单独变量化 -
border-image-slice: 1 fill是硬性前提，漏掉就等于没启用渐变；但这个1是无单位数字，不能写成var(--slice) - 一旦加了
border-radius，Chrome/Firefox 下边框在拐角处大概率撕裂或偏色——这不是 bug，是规范限制 - 旧版 Safari 完全不支持
border-image: linear-gradient()，且无可靠降级路径
真正容易被忽略的是：多层边框的“层间间距”必须用变量独立管理，而不是靠 padding 或 margin 补偿。比如两层阴影之间要留 1px 空隙，得用 calc(var(--border-1-spread) + 1px) 显式计算第二层的 spread，而非指望浏览器自动对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
