结论：用 linear-gradient 或 radial-gradient 搭配 background-size 是模拟纹理最轻量可控的方式，关键在于精准控制单元尺寸、严格匹配多层渐变的 size 值、使用硬色标与固定像素值（如 4px–30px）避免缩放失真，而非仅关注渐变写法。
直接说结论：用 linear-gradient 或 radial-gradient 搭配 background-size 是模拟纹理色最轻量、最可控的方式，但关键不是“怎么写渐变”，而是“怎么控尺寸+怎么叠层+怎么防失真”。
为什么 background-size 决定纹理是否“像真的”
渐变本质是图像，background-size 控制的是这张“虚拟图像”的单元尺寸。设成 30px 30px，浏览器就把它当做一个 30×30 的图块去平铺；设成 cover，它就拉伸填满整个容器——后者在纹理场景下基本等于废掉。
- 条纹类纹理（如细线、网格）：必须用固定像素值，比如
background-size: 12px 12px - 噪点/颗粒感纹理：推荐
background-size: 4px 4px~8px 8px，再配合低透明度色标 - 避免用百分比（如
50% 50%），它会随容器缩放，导致小屏上纹理糊成一片 - 如果某层渐变用了
cover或contain，而其他层用像素值，顺序错乱或混合失效几乎是必然的
多层渐变叠出纹理时，background-size 必须一一对应
每个逗号分隔的渐变都是一层独立图像，background-size 值必须按顺序严格匹配层数。写成 background-size: 20px 20px, cover, 100% 100%，就表示第一层是 20×20 像素块，第二层拉满，第三层等比缩放——少一个、多一个、顺序颠倒，都会让某层纹理消失或错位。
- 常见错误：
background-image: linear-gradient(...), radial-gradient(...); background-size: 30px 30px;→ 只写了 1 个值，第二层默认auto，结果径向渐变只显示中心一小点 - 正确写法必须数量一致：
background-size: 30px 30px, 60px 60px; - 若某层需保持原始比例（比如一个带圆心的
radial-gradient），用contain比cover更稳妥，避免形变
用硬色标 + 小 background-size 制作几何纹理（条纹/棋盘/砖墙）
所谓“硬色标”，就是两个颜色在同一个位置切换，例如 rgba(0,0,0,0.1) 50%, transparent 50%。配合小尺寸 background-size，就能生成清晰边缘的重复图案。
- 水平条纹：
linear-gradient(#3498db 50%, #2980b9 50%)+background-size: 100% 4px - 45°斜纹：
linear-gradient(45deg, #3498db 25%, transparent 25%, transparent 50%, #3498db 50%, #3498db 75%, transparent 75%)+background-size: 20px 20px - 棋盘格：两个正交方向的同色硬切渐变叠加，
background-image: linear-gradient(0deg, #000 50%, transparent 50%), linear-gradient(90deg, #000 50%, transparent 50%)+background-size: 20px 20px - 注意：所有色标位置必须用
%或px显式写出，别依赖默认值，否则不同浏览器渲染可能错位
容易被忽略的兼容性与性能陷阱
看似只是调个尺寸，但在真实项目里常因几个细节翻车。
-
background-blend-mode和background-size必须写在同一个background声明里，分开写（比如先设background-image，再设background-size）会导致混合模式不生效 - 旧版 Safari 对
conic-gradient+background-size支持差，若用圆锥渐变做纹理，建议加降级：background: #f0f0f0; background: conic-gradient(...) ; background-size: ... - 过多图层（>4 层）+ 小尺寸
background-size会触发重绘开销，尤其在滚动区域，可考虑用will-change: background提前提示，但别滥用 - 纹理图层若含
transparent，务必确认底色不是靠background-color而是用单色linear-gradient模拟，否则background-blend-mode无法参与计算
真正难的不是写出第一个条纹，而是让十层渐变在 Retina 屏、折叠屏、缩放 125% 的 Windows 上都保持像素对齐、不失真、不闪烁——这时候，background-size 的每一个像素值，都是你跟渲染引擎签的契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
