CSS中用linear-gradient()实现渐变背景，需注意方向语法、颜色停靠点用百分比更安全、容器高度需设min-height:100vh、IE9以下需-webkit前缀且顺序前置，兼容性已达98%。
HTML5 本身不提供专门的“渐变布局”标签，所有渐变效果都靠 CSS 的 background-image 配合 linea 或 
r-gradient()radial-gradient() 实现。关键不是写在 HTML 里，而是写在元素的样式中。
常见错误是试图用 或 SVG 去“画”背景渐变——完全没必要，纯 CSS 更轻量、可缩放、支持响应式，且能被搜索引擎和屏幕阅读器正常识别。
linear-gradient() 第一个参数是方向，比如 to right、45deg、to bottom right，注意旧写法 left 已废弃，必须用 to left
#ff0000 20%）或长度（#00ff00 100px），不写则自动均分background-image: linear-gradient(...), linear-gradient(...);，但要注意层级顺序（前一个在上）background-color 作降级：老浏览器（如 IE9 及以下）会直接忽略 background-image，只显示纯色渐变默认铺满元素内容区，但若容器高度为 典型场景：想让整个视口显示从蓝到紫的垂直渐变，结果只看到顶部一条细线。 渐变里的颜色停靠点如果写死像素值（如 上面这段在手机上依然平滑，因为所有停靠点都是相对容器宽度的百分比。但如果写成： 那在 375px 宽的 iPhone 上， IE10+ 支持标准 注意：前缀版必须写在标准版之前，否则会被覆盖；而且前缀版的方向语法不支持 auto（比如空 ），它就只有几像素高，渐变根本看不见。这不是渐变写错了，是容器没撑开。
，需显式设 min-height: 100vh，不能只靠 height: 100%（因为父容器 html 默认高度也不足），若内容少，加
min-height: 100vh 或 height: 100vh；若要随内容自适应，确保父容器有明确高度来源
background-attachment: fixed 做全屏渐变——滚动时会出现错位或性能抖动，尤其在移动端响应式渐变中颜色断点怎么写才不崩
100px），在小屏下可能超出容器宽度，导致颜色堆叠或突变。百分比更安全，但要注意起止逻辑。background-image: linear-gradient(
90deg,
#1a2a6c 0%,
#2c3e50 30%,
#4ca1af 70%,
#6a82fb 100%
);
background-image: linear-gradient(
90deg,
#1a2a6c 0px,
#2c3e50 200px,
#4ca1af 400px,
#6a82fb 100%
);
400px 就超出了，浏览器会强制截断或重排，实际效果不可控。
@media 按断点重写整条 background-image
兼容性补丁：IE 和 Safari 旧版本要额外处理
linear-gradient()，但 IE9 及以下完全不支持，Safari 6.1–9.0 需要 -webkit-linear-gradient() 前缀。现在多数项目已放弃 IE9，但若需兼容，得写双份。background-image: -webkit-linear-gradient(to right, #ff9a9e, #fad0c4);
background-image: linear-gradient(to right, #ff9a9e, #fad0c4);
to right，只能用 right（虽然现在也支持了，但为保险仍建议用角度或旧关键词）。
渐变本身很简单，难的是它总和容器尺寸、响应断点、兼容策略缠在一起。写完别只看大屏，随手切到 iPhone SE 尺寸拖一拖滚动条，看有没有色块撕裂或高度塌陷——那才是真实用户看到的。linear-gradient 全局支持率已超 98%，真正需要前缀的只剩极少数内网系统
服务热线