唯一可行路径是用 border-image 配合 linear-gradient，因 tailwind 无原生多重渐变边框类，border-color 和 bg-gradient 均无法实现；需设 transparent 边框、精确控制色标与 border-image-slice: 1。
直接用 border-image 配合 linear-gradient 是唯一可行路径
Tailwind CSS 本身不提供多重渐变边框的原子类，border-gradient 这类工具类并不存在，所有“Tailwind 实现渐变边框”的教程若没手动写 CSS，基本都不可靠。真正能生效的，只有通过 border-image —— 它支持多层渐变叠加，且兼容现代浏览器（Chrome 12+、Firefox 80+、Safari 15.4+）。
注意：不能用 border-color 或 bg-gradient-to-* 模拟，前者只接受单色，后者作用于背景而非边框，会遮盖内容或破坏盒模型。
如何写一个双层线性渐变边框（带透明间隙）
典型需求是外圈深蓝 → 浅蓝，内圈粉 → 紫，中间留 2px 透明间隔。关键在 border-image-slice: 1 和渐变色标位置控制：
.border-double-gradient {
border: 6px solid transparent;
border-image: linear-gradient(90deg, #1e40af, #3b82f6, transparent 33%, transparent 66%, #ec4899, #8b5cf6) 1;
}
-
border: 6px solid transparent提供物理边框宽度，必须设为transparent，否则覆盖border-image - 渐变中用
transparent 33%, transparent 66%切出中间空白段，数值需根据总层数和间距手动算（6px 边框 × 3 段 ≈ 每段 2px） -
border-image-slice: 1表示不裁剪渐变图，完整拉伸填充边框区域；设为1而非100%是因为该属性单位是“无单位数字”，1即 1px 切片基准（规范要求）
在 Tailwind 中怎么安全混用自定义 border-image
不能把上面的 CSS 直接塞进 @layer utilities 并期望它响应屏幕断点或 dark mode，border-image 不支持伪类或媒体查询自动注入。推荐做法是：
- 用
@layer components定义固定类名，如.border-dual-glow，并在需要处显式添加 - 若需响应式，手动加
md:border-dual-glow等类，并在 CSS 中用@media (min-width: 768px)重写border-image - dark mode 下，不要依赖
dark:border-dual-glow—— 因为border-image本身不继承主题色，必须在类内部用color-scheme: dark或 JS 切换变量，更稳妥的是用 CSS 自定义属性：border-image: linear-gradient(..., var(--border-glow-1), var(--border-glow-2))
为什么 box-shadow 模拟不是真边框，且有硬伤
有人用多层 box-shadow（如 shadow-[0_0_0_2px_#1e40af,0_0_0_4px_#3b82f6]）假装渐变边框，但它本质是投影，会导致：
- 无法触发
:focus-visible的 outline 样式冲突 - 在
transform: scale(0.98)或filter: blur(1px)下严重失真 - 父容器设了
overflow: hidden时，阴影被裁切，而真实边框不会 - Tailwind 的
shadow-工具类不支持径向/角度渐变语法，只能写死颜色，无法动态插值
多重渐变边框的复杂度不在写法，而在它天然脱离 Tailwind 的响应式与主题系统——你得亲手管好每一像素的色标位置、切片比例、暗色适配和高对比度模式 fallback。别省这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
