linear-gradient() 实现多色渐变需明确颜色停靠点位置，如 #f00 0%、#0f0 50%、#00f 100%，避免默认等距分配导致色带异常；须显式设置 background-color 作降级，且简写中置于渐变前。
如何用 linear-gradient() 实现多色渐变背景
纯 CSS 多色渐变背景的核心就是 linear-gradient()，它支持任意数量的颜色节点，不依赖 JS 或图片。关键不是“能不能”，而是颜色停靠点（color stop）的位置是否明确——漏写位置或单位错误，浏览器会按默认等距分配，结果往往和预期不符。
- 必须为至少两个颜色指定明确位置（如
#f00 0%、#0f0 50%、#00f 100%），否则中间色容易被压缩或跳变 - 支持百分比、
px、rem等绝对/相对单位，但同一声明中混用单位（如#000 0% #fff 100px）在部分旧版 Safari 中可能失效 - 方向参数可写
to top、45deg等，注意to bottom（默认）和180deg等价，但语义更清晰
为什么 background-image 必须覆盖 background-color
渐变本质是图像，属于 background-image 层级；而 background-color 是底层纯色。如果只写 background: linear-gradient(...)，实际等价于 background-image: linear-gradient(...); background-color: transparent，此时若渐变未铺满容器（比如有透明区域或未设高度），就会露出父元素背景或页面默认白底——这不是渐变失效，是层叠逻辑没理清。
- 稳妥做法：显式声明
background-color作为降级色，例如background: #333; background-image: linear-gradient(45deg, #f00, #ff0, #0f0); - 若需完全透明底色，确保容器本身有明确尺寸（
height或min-height），否则渐变区域可能坍缩 - 使用
background简写时，background-color必须写在渐变前，否则会被覆盖（CSS 简写规则：后写的子属性会重置未显式声明的其他子属性）
径向渐变 radial-gradient() 的常见定位陷阱
radial-gradient() 默认以中心为起点，但“中心”指容器内容盒（content box）的中心，不是 padding box 或 border box。当容器有内边距或边框时，视觉上渐变会偏移，尤其在圆角容器中容易显得不对称。
- 用
radial-gradient(circle at 20% 30%, #f00, #00f)显式控制圆心坐标，20% 30%表示从左上角起算的相对位置 - 避免用
closest-side/farthest-corner这类关键字在响应式布局中——它们依赖容器实时尺寸，窗口缩放时半径突变，造成闪烁或错位 - 若要模拟“从按钮文字处发散”的效果，不能只靠 CSS，需结合 JS 动态计算坐标并注入 style，纯 CSS 无法绑定到文本位置
兼容性与性能：哪些写法该避开
现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+）对标准语法支持良好，但仍有三个易踩点：
立即学习“前端免费学习笔记（深入）”；
- 老版本 iOS Safari（hsl() 或
hwb()颜色格式在渐变中，建议统一用rgb()或十六进制 - 不要在
linear-gradient()中混用transparent和非透明色却不标位置，例如linear-gradient(to right, red, transparent, blue)—— 中间transparent无位置时，不同浏览器解析差异大 - 超过 10 个颜色节点的渐变在低端 Android WebView 中可能触发渲染卡顿，视觉提升有限，建议用 3–6 个关键色+平滑过渡代替堆砌
多色渐变真正难的不是写法，是颜色节奏和空间分布的控制——同一个 linear-gradient(135deg, #f00, #ff0, #0f0, #00f) 在窄容器里会挤成色带，在宽屏上又稀释得看不出层次。动手前先想清楚：这个渐变是要引导视线、暗示深度，还是单纯装饰？答案不同，停靠点的数值就得重调。
