transition无法直接控制多层边框逐层展开，因border是简写属性，浏览器不支持对border-width或border-color中间状态插值；正确做法是用::before/::after伪元素配合inset和transition-delay实现分层动画。
transition 不能直接控制多层边框的“逐层展开”
因为 border 是一个简写属性，浏览器不支持对 border-width 或 border-color 的中间状态做插值过渡——你设 border: 0 solid #000 → border: 4px solid #000，实际动画会卡顿、跳变，甚至完全不触发。更关键的是，border 本身无法表达“第一层先出、第二层后出”这种时序逻辑。
用伪元素 + transition 实现可控的外层叠效果
真正可行的做法是把每层边框拆成独立的视觉层（::before / ::after），再用 transform: scale() 或 inset 配合 transition 控制它们的出现节奏：
- 父容器必须设
position: relative -
::before画最外层：初始inset: -8px（完全缩进）→ hover 时inset: 0，加transition: inset 0.3s ease-out -
::after画内层：初始inset: 2px→ hover 时inset: 0，但加transition-delay: 0.1s - 两层都需显式声明
box-sizing: border-box和相同border-radius，否则圆角错位
示例关键代码：
.multi-border {
position: relative;
}
.multi-border::before,
.multi-border::after {
content: "";
position: absolute;
inset: 0;
border: 2px solid #3498db;
border-radius: 8px;
box-sizing: border-box;
pointer-events: none;
}
.multi-border::before {
border-color: #e74c3c;
inset: -8px;
transition: inset 0.3s ease-out;
}
.multi-border::after {
border-color: #2ecc71;
inset: 2px;
transition: inset 0.3s ease-out 0.1s;
}
.multi-border:hover::before {
inset: 0;
}
.multi-border:hover::after {
inset: 0;
}
为什么不用 box-shadow + transition 模拟？
box-shadow 的扩散值（spread）虽能模拟边框厚度，但它不支持对单个阴影的 inset 或 spread 单独做 transition——你只能对整个 box-shadow 属性整体过渡，而多层阴影写在一起时，浏览器会把它们当做一个字符串值去插值，结果通常是模糊抖动或直接失效。iOS Safari 对含 box-shadow 的 transition 尤其敏感，容易掉帧。
hover 触发时边缘撕裂？检查这三点
伪元素外扩过程中出现“白边”或“断层”，大概率是以下问题：
- 没设
box-sizing: border-box：导致inset: 0+border: 2px后实际尺寸超出父容器 -
border-radius值在伪元素和主元素间不一致：比如主元素是8px，伪元素漏写了，就会“外圆内方” - 父容器有
overflow: hidden：它会裁掉伪元素刚展开时的过渡帧，应改为overflow: visible或确保伪元素完全在父盒内
真正难的不是让边框动起来，而是让每一层都在不同缩放比例、不同设备像素比下，严丝合缝地对齐圆角和位置——这需要每层都独立控制 inset 和 border-radius，而不是指望一行 box-shadow 自动搞定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
