CSS中用linear-gradient()实现渐变背景，需注意方向语法、颜色停靠点用百分比更安全、容器高度需设min-height:100vh、IE9以下需-webkit前缀且顺序前置，兼容性已达98%。
background-image 里用 linear-gradient 实现渐变背景
HTML5 本身不提供专门的“渐变布局”标签，所有渐变效果都靠 CSS 的 background-image 配合 linear-gradient() 或 radial-gradient() 实现。关键不是写在 HTML 里，而是写在元素的样式中。
常见错误是试图用 <canvas> 或 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（比如空 <div>），它就只有几像素高，渐变根本看不见。这不是渐变写错了，是容器没撑开。
典型场景：想让整个视口显示从蓝到紫的垂直渐变，结果只看到顶部一条细线。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 对
<body>，需显式设min-height: 100vh，不能只靠height: 100%（因为父容器html默认高度也不足） - 对普通
<div>，若内容少，加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），确保其插件链没把渐变规则意外转义或拆分
