html不支持渐变，须用css的linear-gradient()实现；最简斜向渐变写法为body{background:linear-gradient(135deg,#ff9a9e,#fad0c4)}，需配background-size:cover自适应视口，ie10–11需加-ms-前缀且置于标准声明之前，圆角容器应加background-clip:padding-box防边缘发虚。
HTML 本身不处理渐变，必须用 CSS 的 background 或 background-image 配合 linear-gradient() 实现；直接写在 HTML 标签里（比如 ）完全无效。
用 linear-gradient() 写最简可行的斜向渐变
现代浏览器下，一行 CSS 就够：
body { background: linear-gradient(135deg, #ff9a9e, #fad0c4); }
注意三点：
-
135deg是方向，不是135——漏单位会整个声明失效 - 颜色之间必须用英文逗号分隔，
#ff9a9e,#fad0c4（没空格）也行，但加空格更易读 - 别把这行塞进
里，内联样式不支持函数调用，只认纯色
为什么加 background-size: cover？
默认渐变区域大小等于元素原始尺寸，窗口缩放时颜色会“卡住”不动，小屏只显示左上角起点色，大屏则重复平铺出条纹。加这一句才能真正随视口自适应：
body {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
background-size: cover;
}
常见错误是只写 no-repeat 就以为完事——它只是禁掉重复，不解决尺寸拉伸问题。
IE10–11 兼容要手动加 -ms- 前缀
Autoprefixer 默认不处理 IE，且顺序必须严格：
body {
background: #ff9a9e; /* fallback for IE8- */
background: -ms-linear-gradient(135deg, #ff9a9e, #fad0c4); /* IE10–11 */
background: linear-gradient(135deg, #ff9a9e, #fad0c4); /* modern */
}
关键点：
-
-ms-版本必须写在标准版之前，否则被覆盖 - IE10–11 不支持
rgba()透明度，想模拟半透效果只能换浅色系逼近 - IE9 及更早完全不支持，fallback 色必须真实可用
圆角容器边缘发虚？加 background-clip: padding-box
如果给带 border-radius 的卡片或容器设渐变背景，边缘常出现模糊或溢出。根本原因是渐变默认绘制在 border box 区域，而圆角裁剪发生在 border 边缘外侧：
.card {
border-radius: 12px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
background-clip: padding-box; /* 关键：让渐变只填到内边距边界 */
}
这个属性不改变视觉形状，只修正渲染层归属——不加的话，哪怕用了 overflow: hidden 也压不住边缘发虚。
渐变方向、颜色停靠点、多层叠加这些进阶控制都容易调，但 fallback 色、background-size、background-clip 这三处最容易被跳过，一漏就导致上线后在某类设备上背景消失或变形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
