html本身不支持渐变色，必须用css的background或background-image配合linear-gradient()、radial-gradient()实现；方向需带单位或关键词，颜色间须用逗号分隔，且需提供background-color降级方案。
直接说结论：HTML 本身不支持设置渐变色，必须靠 CSS 的 background 或 background-image 配合 linear-gradient()、radial-gradient() 等函数实现。
用 linear-gradient() 做水平/垂直/斜向背景
这是最常用的方式，语法是 background: linear-gradient(方向, 颜色1, 颜色2, ...)。方向可以是关键词（如 to right、to bottom）或角度（如 45deg），注意角度默认是 to bottom（即 180deg），不是 0° 向右。
常见写法示例：
-
background: linear-gradient(to right, #ff6b6b, #4ecdc4);—— 左到右渐变 -
background: linear-gradient(135deg, #6a11cb, #2575fc);—— 左上到右下斜向渐变 -
background: linear-gradient(to bottom, #fff, transparent);—— 白色到底部透明的遮罩效果（常用于文字叠加）
⚠️ 容易踩坑：漏写单位（如 45 不是 45deg）、颜色之间没逗号、方向关键词拼错（比如写成 right 而不是 to right）都会导致整个声明失效，浏览器回退到纯色。
用 radial-gradient() 做圆形/椭圆渐变
适合做焦点高亮、按钮悬停、卡片浮层等场景。基础语法是 background: radial-gradient(形状 大小 at 位置, 颜色1, 颜色2)，其中 circle 和 ellipse 是可选形状，默认是 ellipse；at 后面跟坐标（如 center、20% 30%）。
实用例子：
-
background: radial-gradient(circle at center, #ff9a9e, #fad0c4);—— 居中发散的柔色圆渐变 -
background: radial-gradient(ellipse at 80% 20%, #4facfe 0%, transparent 70%);—— 右上角起始的椭圆光晕
⚠️ 注意点：如果没写 at，默认是 at center；但一旦写了位置，就必须带 at 关键字，否则无效。另外，transparent 在老版 Safari 中需配合 rgba(0,0,0,0) 才更稳。
兼容性 & 性能提醒：别盲目加多层渐变
现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+）都原生支持 linear-gradient 和 radial-gradient，但 IE10–IE11 只支持旧语法（带 -ms- 前缀），而 IE9 及以下完全不支持——这时候必须提供 background-color 作为降级 fallback。
性能方面：
- 单层渐变几乎无开销，放心用
- 多层渐变（用逗号分隔多个
gradient）会增加绘制成本，尤其在移动端滚动时可能掉帧 - 避免在
:hover中突然切换复杂渐变，建议用transition: background 0.3s ease控制变化节奏
一个稳妥写法示例：
button {
background-color: #4ecdc4;
background-image: linear-gradient(to right, #4ecdc4, #ff6b6b);
transition: background 0.25s ease;
}
别用
渐变本质是 background-image 的一种取值，所以它和 background-color 是互斥又互补的关系。很多人习惯在 HTML 标签里写 style="background: linear-gradient(...)”，这没问题，但一来难维护，二来容易手误漏掉括号或逗号，导致整条规则静默失效（浏览器不会报错，只是当没写）。
更推荐方式：
- 写在 CSS 文件或
<style></style>块里，便于复用和调试 - 所有角度必须带单位（
deg、turn、grad），不能只写数字 - 颜色列表中每个颜色后都要有逗号（最后一个颜色后面不加）
- 调试时打开开发者工具，看
Computed面板里background-image是否解析成功，比肉眼判断更准
真正卡住人的往往不是“怎么写”，而是括号没闭合、逗号少打一个、或者把 to top 误写成 top —— 这些错误都不会报红，只会让渐变消失得不明不白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
