Bootstrap 5 不支持断点响应式条纹渐变，必须用 repeating-linear-gradient() 配合 @media (min-width: 768px) 手写 CSS，并设小屏纯色回退；bg-gradient-primary + d-md-block 仅控制显隐，无法生成条纹。
Bootstrap 5 没有内置的“条纹渐变”工具类，也完全不支持断点响应式条纹渐变 —— 必须手写 background-image 配合媒体查询，且条纹需用 repeating-linear-gradient() 实现，不能靠 bg-gradient-* 类拼凑。
为什么 bg-gradient-primary + d-md-block 无法实现条纹渐变
因为 bg-gradient-primary 只是固定角度（135deg）的单次线性渐变，它不生成条纹；d-md-block 控制的是元素显隐，不是背景样式开关。两者叠加只会让整个容器在小屏消失，而不是“小屏无条纹、中屏有条纹”。更关键的是：Bootstrap 所有 bg-gradient-* 类底层都是 background-image: linear-gradient()，压根不支持 repeating- 前缀。
如何用 repeating-linear-gradient() 写响应式条纹背景
条纹本质是重复渐变，必须用 background-image: repeating-linear-gradient()，并配合媒体查询控制生效断点。小屏回退纯色是硬性前提，否则在窄屏下会看到错乱条纹或透明间隙。
- 基础态（所有尺寸）先设
background-color，例如.striped-bg { background-color: #f8f9fa; } - 仅在 md 及以上启用条纹：
@media (min-width: 768px) { .striped-bg { background-image: repeating-linear-gradient(90deg, #0d6efd, #0d6efd 10px, transparent 10px, transparent 20px); } } - 方向优先用角度（如
90deg表示水平条纹），避免to right—— Safari 15.6 之前对后者渲染异常 - 色值建议用十六进制或
rgba()，避免hsl()在旧 WebView 中解析失败 - 别在同个选择器里混用
background简写和background-image，否则条纹会被清空
按钮或卡片上加响应式条纹的注意事项
在 .btn 或 .card 上应用时，要额外处理状态覆盖和层级干扰：
- 按钮必须加
background-color: transparent !important，否则 Bootstrap 的!important纯色会盖掉条纹 -
:hover和:active状态需单独定义条纹，否则悬停时退回到纯色背景 - 卡片内如果有
.card-body这类子容器，确保它们没设background-color，否则会遮挡父级条纹 - 若用了深色模式，需额外加
@media (prefers-color-scheme: dark)重定义条纹色值，不能只靠color-mode自动切换
容易被忽略的兼容性细节
最常出问题的地方不在逻辑，而在像素精度和浏览器前缀：
- 条纹宽度单位必须用
px，不要用rem或%——repeating-linear-gradient对相对单位支持极差 - Safari 15.4 及更早版本需要
-webkit-repeating-linear-gradient()，虽然 Bootstrap 5 官方已弃用前缀，但企业内网仍可能跑旧版 - 移动端点击条纹按钮时，iOS Safari 可能跳过
:active，必须显式写.striped-btn:active { background-image: ... }，不能省略 - 如果条纹颜色含透明度（如
rgba(13,110,237,0.1)），务必确认父容器没有opacity，否则会双重透明导致不可读
