background-image 里用 linear-gradient 是唯一正解，因其可与其他 background 属性（如 size、position）共存，支持多层背景叠加，且角度写法（如 135deg）比 to bottom 更可控、兼容性更好。
background-image 里用 linear-gradient 是唯一正解
直接写 background: linear-gradient(...) 看似省事，但实际会覆盖掉所有其他 background 属性（比如 background-size、background-position），导致后续调整失控。必须显式用 background-image 单独声明渐变，把其他背景控制权留出来。
-
background-image只管“画什么”，background-color负责 fallback，background-size和background-position管尺寸和定位，各司其职 - 多层背景叠加时（比如渐变 + 图片），只有用
background-image才能写出类似background-image: linear-gradient(...), url(...)的合法语法 - 不加单位的色标（如
50%）比关键词（如to bottom）更可控——后者在某些旧浏览器里解析不一致
linear-gradient 参数顺序决定方向和过渡逻辑
别记“to top”这种反直觉写法。直接用角度（如 135deg）最稳妥：0deg 向右，90deg 向上，135deg 就是左上到右下。颜色停靠点必须按顺序从左到右排列，否则浏览器会自动重排，结果不可控。
- 错误写法：
linear-gradient(to top, #fff, #000)—— 在 Safari 15.4 之前可能渲染为从下往上渐变，但方向语义模糊 - 推荐写法：
linear-gradient(0deg, #fff, #000)—— 明确向右平移，颜色从白到黑线性过渡 - 停靠点支持百分比或长度值：
linear-gradient(90deg, #f00 0%, #ff0 50%, #0f0 100%)，中间色块宽度由相邻两个停靠点间距决定
渐变边缘发虚？多半是 background-size 或容器尺寸没对齐
渐变本身没有“模糊”属性，所谓“不锐利”几乎全是 background-size 和元素宽高不匹配导致的重复拉伸或截断。尤其当容器宽高比动态变化（比如响应式卡片），固定大小的渐变图样会错位。
- 用
background-size: cover或contain前先确认容器有明确宽高，否则默认按 100% × 100% 渲染，可能超出视口 - 想让渐变严格铺满且不重复，写
background-size: 100% 100%，再配background-repeat: no-repeat - 圆角容器（
border-radius）里渐变边缘看起来“晕开”，其实是背景图被裁切了——此时需确保background-clip: padding-box（默认值，一般不用改）
兼容性兜底必须用 background-color，不能靠滤镜或 JS
IE10+ 支持标准 linear-gradient，但 IE9 及更早版本完全不识别。CSS 里直接跟一个 background-color 声明就是最轻量、最可靠的降级方式，浏览器会自然忽略不支持的 background-image 值而回退到纯色。
- 正确兜底：
background-color: #333; background-image: linear-gradient(45deg, #333, #666); - 错误思路：用
filter: progid:DXImageTransform.Microsoft.gradient(...)—— IE 特供语法早已废弃，现代打包工具也不处理 - 别给渐变加透明度来模拟“半透效果”，
rgba()颜色值本身已足够；用opacity会影响整个元素，不是背景专属
真正麻烦的是渐变动画——background-position 可以过渡，但 linear-gradient 里的颜色值无法 CSS 动画。需要动效时，得换 canvas 或伪元素叠层方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
