不能直接用，需显式设置 border: 2px solid transparent 和 border-image: linear-gradient(...) 1；border-image-slice 必须为 1（无单位）才能拉伸渐变，且需避免 Bootstrap 的 border-0 等类覆盖。
border-image 能直接给 Bootstrap 卡片加渐变边框吗？
不能直接用，至少不能“开箱即用”。border-image 确实支持渐变（比如 linear-gradient），但 Bootstrap 的 .card 默认设置了 border-style: solid 且未预留 border-image 适配逻辑。更关键的是：border-image 会覆盖 border-color，但**不触发 border 的渲染尺寸计算**——如果卡片本身 border-width 为 0，哪怕写了 border-image 也看不到效果。
必须显式设置 border-width 才能生效
border-image 是装饰性属性，它不会自动撑出边框空间。你得手动指定 border-width，否则浏览器认为“没边框”，渐变自然不显示。
- 必须写
border-width: 2px（或具体值），不能只靠border-image-slice或border-image-source - 推荐用
border: 2px solid transparent开头，既占位又避免干扰渐变色 - Bootstrap 5+ 的
.card默认border: 0，所以这一步不可跳过
.card-gradient-border {
border: 2px solid transparent;
border-image: linear-gradient(45deg, #6a11cb, #2575fc) 1;
}
border-image-slice 为 1 是关键取值
border-image-slice 控制渐变如何映射到四条边上。设为 1 表示“拉伸填充”（stretch），这是实现连续渐变边框的必要条件；若用默认值 100% 或其他数字，渐变会被切割、重复或留白。
-
border-image-slice: 1→ 拉伸整个渐变图铺满边框区域 -
border-image-slice: 20→ 会从图像边缘切出 20px 区域，再平铺，对 CSS 渐变无效 - 不要写单位（如
1px），纯数字1才表示 stretch 模式
与 Bootstrap 响应式类共存时的常见冲突
如果你给卡片加了 .card-sm 或自定义 padding/margin 类，可能挤压边框渲染区域；更隐蔽的问题是：某些 Bootstrap 工具类（如 .border-0）会重置 border-style，导致 border-image 失效。
- 检查是否意外引入了
border-0、border-secondary等覆盖样式 - 用浏览器 DevTools 查看 computed 样式中
border-image是否被标记为 “invalid” 或 “overridden” - 优先用独立 class（如
.card-gradient-border）并提高 CSS 优先级，比如加!important仅用于border和border-image两个声明
真正容易被忽略的是：渐变边框在圆角（border-radius）下会断层——border-image 不自动裁切圆角过渡，必须配合 overflow: hidden 和内层容器遮罩，或者改用 box-shadow: inset + 伪元素模拟，那又是另一条路径了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
