css中用linear-gradient()实现渐变背景，需注意方向语法、颜色停靠点用百分比更安全、容器高度需设min-height:100vh、IE9以下需-webkit前缀且顺序前置，兼容性已达98%。
background-image 里用 linear-gradient 实现渐变背景
html5 本身不提供专门的“渐变布局”标签，所有渐变效果都靠 CSS 的 background-image 配合 linear-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，只显示纯色
给 div 或 body 设置全屏渐变背景时的尺寸陷阱
渐变默认铺满元素内容区，但若容器高度为 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% );那在 375px 宽的 iphone 上，
400px就超出了，浏览器会强制截断或重排，实际效果不可控。- 停靠点优先用百分比，尤其是多色复杂渐变
- 若必须用像素（例如模拟某种设计稿间距），配合
@media按断点重写整条background-image - 用 chrome DevTools 的“Rendering”面板勾选“Emulate CSS media features”可快速验证不同宽高比下的渐变表现
兼容性补丁：IE 和 safari 旧版本要额外处理
IE10+ 支持标准
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（虽然现在也支持了，但为保险仍建议用角度或旧关键词）。- Can I Use 数据显示，
linear-gradient全局支持率已超 98%，真正需要前缀的只剩极少数内网系统 - 不要用 Autoprefixer 自动生成前缀——它默认已移除 Safari
- 如果用了 CSS-in-js（如 styled-components），确保其插件链没把渐变规则意外转义或拆分
渐变本身很简单，难的是它总和容器尺寸、响应断点、兼容策略缠在一起。写完别只看大屏，随手切到 iPhone SE 尺寸拖一拖滚动条，看有没有色块撕裂或高度塌陷——那才是真实用户看到的。
- 避免用