repeating-linear-gradient() 的密度由色标间距决定，需用 css 变量配合 calc() 控制重复单元长度（如 --stripe-unit），而非方向参数；响应高 dpr 屏幕需媒体查询或 js 注入 --dpr 缩放；动画应作用于 background-size 或 background-position，避免直接过渡长度变量。
repeating-linear-gradient() 的密度由 CSS 变量控制，但不能直接传入角度或色标位置
repeating-linear-gradient() 本身不接受变量作为方向参数或色标数值，repeating-linear-gradient(var(--angle), ...) 会失效。真正能动态控制“密度”的，是重复单元的长度——它由色标之间的距离决定。比如 repeating-linear-gradient(to right, #000 0px, #000 2px, transparent 2px, transparent 4px) 中，4px 就是重复单元宽度，密度 = 1 / 4px。所以你要动的不是函数本身，而是色标值。
用 calc() + 变量定义重复单元尺寸，避免硬编码像素值
把重复单元总长（如条纹宽+空白宽）抽成变量，再用 calc() 拆分色标位置。这样改一个值就能全局调整疏密：
-
--stripe-unit: 8px表示一个完整条纹周期（色块+空白） -
--stripe-fill: 2px表示色块实际高度/宽度 - 背景写成：
background: repeating-linear-gradient(90deg, #3498db, #3498db calc(var(--stripe-fill)), transparent calc(var(--stripe-fill)), transparent var(--stripe-unit)) - 修改
--stripe-unit就改变密度；调--stripe-fill则改变粗细比例
媒体查询中重设变量才能响应屏幕密度变化
仅在 :root 声明变量不够，高 DPR 屏幕下若想保持物理像素级密度（比如 1px 线），必须配合 JS 注入的 --dpr 或媒体查询做缩放补偿：
- 默认：:root { --stripe-unit: 8px; }
- 高密度屏降尺度：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { :root { --stripe-unit: calc(8px / 2); } } - 更稳妥的做法是用 JS 注入
--dpr后，在 CSS 里统一写calc(8px / var(--dpr, 1))，但注意：Safari 对 calc 内嵌变量在 media query 切换时重算不及时，建议 JS 主动触发重设
动画平铺图案时，避免用 transition 直接过渡变量
想让条纹动起来（比如横向滚动、密度渐变），别对 --stripe-unit 做 transition —— 浏览器无法插值两个不同长度的重复单元，只会卡顿或跳变。正确方式是：
- 用
@property声明变量为<number></number>类型（如@property --stripe-scale { syntax: '<number>'; initial-value: 1; inherits: false; }</number>） - 背景改用
background-size: calc(var(--stripe-unit) * var(--stripe-scale))，再对--stripe-scale做 transition - 或者干脆放弃变量，用
animation驱动background-position实现滚动效果，更稳定
真正麻烦的不是怎么写，而是你改了 --stripe-unit 后，所有依赖它的 calc() 表达式是否在所有浏览器里都实时重计算——尤其 Safari 16.4 和旧版 Chrome 在媒体查询切换后常缓存结果，必须手动触发 document.documentElement.style.setProperty 才能兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
