border-color 不支持平滑 transition，因浏览器对其插值能力弱；推荐用 outline 或 box-shadow 模拟可过渡边框，或用伪元素/SVG 实现，现代方案可选 CSS @property（仅 Chromium 支持）。
border-color 本身不支持 transition
直接写 transition: border-color 0.3s 看似合理，但多数情况下不会生效——因为 border-color 是离散属性，浏览器对它的插值支持极弱，尤其在不同色值（如 #ff0000 → rgba(0,0,255,0.5)）或不同边颜色不一致时，过渡会卡顿、跳变甚至完全静止。
用 outline + box-shadow 模拟可过渡边框
这是目前最稳定、兼容性好（IE11+）、且无需 JS 的方案：用 outline 或 box-shadow 替代 border，它们的 color 属性能被浏览器平滑插值。
-
outline不占布局空间，适合 hover 时“浮出”效果，但无法单独控制某一边 -
box-shadow更灵活，可用inset模拟内边框，或通过多层 shadow 控制上下左右 - 示例：让按钮边框从蓝变紫，用
box-shadow: 0 0 0 2px #3b82f6;→box-shadow: 0 0 0 2px #8b5cf6;，配合transition: box-shadow 0.3s ease
用 SVG 或伪元素实现真正 border 过渡
如果必须保留原生 border 的布局行为（比如影响盒模型、需要精确对齐），就得绕开 CSS 插值限制：
- 用
::before或::after绘制一层绝对定位的“假边框”，通过background+transform: scale()或clip-path控制显隐，再对背景色做 transition - SVG
<rect></rect>套在元素外层，用stroke+stroke-dasharray配合transition: stroke 0.3s，但维护成本高 - 注意：伪元素方案需确保父容器
position: relative，且 z-index 要合理，否则遮挡内容
现代方案：CSS @property + transition（仅 Chromium 110+）
若目标环境可控（如内部管理后台），可启用实验性能力：
立即学习“前端免费学习笔记（深入）”；
- 先用
@property注册自定义属性，例如border-hue，类型设为<number></number> - 在元素上用
border-color: hsl(var(--border-hue), 80%, 60%) - 然后
transition: --border-hue 0.3s—— 浏览器会对这个注册过的变量做数值插值，间接驱动颜色变化 - ⚠️ Safari 和 Firefox 尚未支持
@property的 color 类型插值，当前仅 Chromium 系列可靠
真正平滑的 border-color 过渡，本质是绕过浏览器对复合颜色值的插值缺陷。选 outline/box-shadow 是最快落地的解法；伪元素适合强样式控制场景；@property 是未来方向，但别在生产环境赌兼容性。
