最简渐变写法为body { background: linear-gradient(135deg, #ff9a9e, #fad0c4); }，需注意ie兼容需加-moz-、-ms-前缀及fallback色，缩放用background-size: cover，多色断点用百分比定位，圆角容器加background-clip: padding-box防边缘发虚。
用 background + linear-gradient() 直接写进 CSS 就行
HTML 本身不处理渐变，必须靠 CSS 的 background 属性配合 linear-gradient() 函数。别在 标签里加 bgcolor 或 inline style 写死颜色——那没法渐变。
最简可行写法是给 body 或根容器设样式：
body {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
注意三点：135deg 控制方向（0deg 垂直向下，90deg 水平向右），两个颜色值之间用逗号隔开，末尾不加单位也不加分号（如果只有一条声明）。
IE 不支持 linear-gradient()？得加 -ms- 前缀和 fallback 颜色
IE10–11 要求带 -ms- 前缀，且必须写在标准写法前面；IE9 及更早版本完全不支持，只能退回到单色背景。
稳妥写法要分层覆盖：
body {
background: #ff9a9e; /* fallback for IE8 and older */
background: -ms-linear-gradient(135deg, #ff9a9e, #fad0c4); /* IE10 */
background: linear-gradient(135deg, #ff9a9e, #fad0c4); /* modern browsers */
}
- 顺序不能错：前缀版必须在标准版之前，否则会被覆盖
- 别信“Autoprefixer 能全搞定”——它默认不处理
-ms-，得手动配或用postcss-ie11 - 渐变在 IE10 中不支持透明度（
rgba()），用hsla()也无效，只能换浅色系逼近效果
想让渐变随窗口缩放不拉伸变形？加 background-size: cover
默认渐变会平铺（repeat），小屏幕可能只显示起点色，大屏则重复出现条纹。常见错误是加 no-repeat 就完事，但没设尺寸的话，渐变区域仍按元素原始大小渲染，导致缩放时颜色“卡住”不动。
正确做法是锁定渐变画布大小：
body {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /* 可选：滚动时背景不动 */
}
-
cover确保渐变始终填满视口，哪怕内容高度不足 -
background-attachment: fixed在 Safari 上偶尔触发渲染 bug，若页面有滚动抖动，先去掉这行再排查 - 别用
100% 100%代替cover——前者按元素尺寸拉伸，后者按视口等比缩放
多个颜色断点、角度微调、圆角容器里怎么避免边缘生硬？
双色渐变够用，但真实项目常要三段过渡（比如蓝→白→橙）、斜角切边、或卡片内局部渐变。这时候得靠颜色位置百分比和 background-clip 配合。
例如：顶部蓝白渐变 + 底部白橙渐变，中间留白：
body {
background: linear-gradient(to bottom,
#1a73e8 0%,
#1a73e8 40%,
#fff 40%,
#fff 60%,
#fbbc05 60%,
#fbbc05 100%);
}
- 每个颜色后跟百分比，表示该色停止的位置；相邻两个相同颜色不同百分比 = 硬边过渡
- 圆角容器（如
border-radius: 12px）里用渐变，边缘会发虚——加background-clip: padding-box可让渐变只作用于内边距区域，避开圆角裁剪干扰 - 移动端 Safari 对超过 5 个色标的支持不稳定，测试时用真机刷几次，别只看 Chrome DevTools 模拟器
渐变看着简单，实际卡点都在细节：IE 兼容性、缩放行为、多断点精度、以及 Safari 对 background-clip 和 fixed 的组合表现。先跑通基础写法，再按需叠加，比一上来堆参数更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
