不能直接用，需显式设置 border: 2px solid transparent 和 border-image: linear-gradient(...) 1；border-image-slice 必须为 1（无单位）才能拉伸渐变，且需避免 Bootstrap 的 border-0 等类覆盖。
border-image 能直接给 Bootstrap 卡片加渐变边框吗？
不能直接用，至少不能“开箱即用”。
确实支持渐变（比如
），但 Bootstrap 的
默认设置了
且未预留
适配逻辑。更关键的是：
会覆盖
，但**不触发 border 的渲染尺寸计算**——如果卡片本身
为 0，哪怕写了
也看不到效果。
必须显式设置 border-width 才能生效
是装饰性属性，它不会自动撑出边框空间。你得手动指定
，否则浏览器认为“没边框”，渐变自然不显示。
必须写
（或具体值），不能只靠
或
推荐用
开头，既占位又避免干扰渐变色
Bootstrap 5+ 的
默认
，所以这一步不可跳过
border-image-slice 为 1 是关键取值
控制渐变如何映射到四条边上。设为
表示“拉伸填充”（stretch），这是实现连续渐变边框的必要条件；若用默认值
或其他数字，渐变会被切割、重复或留白。
→ 拉伸整个渐变图铺满边框区域
→ 会从图像边缘切出 20px 区域，再平铺，对 CSS 渐变无效
不要写单位（如
），纯数字
才表示 stretch 模式
与 Bootstrap 响应式类共存时的常见冲突
如果你给卡片加了
或自定义 padding/margin 类，可能挤压边框渲染区域；更隐蔽的问题是：某些 Bootstrap 工具类（如
）会重置
，导致
失效。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
检查是否意外引入了
、
等覆盖样式
用浏览器 DevTools 查看 computed 样式中
是否被标记为 “invalid” 或 “overridden”
优先用独立 class（如
）并提高 CSS 优先级，比如加
仅用于
和
两个声明
真正容易被忽略的是：渐变边框在圆角（
）下会断层——
不自动裁切圆角过渡，必须配合
和内层容器遮罩，或者改用
+ 伪元素模拟，那又是另一条路径了。
border-imagelinear-gradient.cardborder-style: solidborder-imageborder-imageborder-colorborder-widthborder-imageborder-imageborder-widthborder-width: 2pxborder-image-sliceborder-image-sourceborder: 2px solid transparent.cardborder: 0.card-gradient-border {
border: 2px solid transparent;
border-image: linear-gradient(45deg, #6a11cb, #2575fc) 1;
}border-image-slice1100%border-image-slice: 1border-image-slice: 201px1.card-sm.border-0border-styleborder-imageborder-0border-secondaryborder-image.card-gradient-border!importantborderborder-imageborder-radiusborder-imageoverflow: hiddenbox-shadow: inset