✅ 正确写法必须显式使用 background-image: linear-gradient(to right, #3b82f6, #8b5cf6)；radial-gradient() 的 at center 不可省略以防错位；动态拼接需注意空格、单位、颜色格式及兼容性检测。
直接用 linear-gradient() 和 radial-gradient() 就能实现所有渐变效果，所谓“HTML 渐变生成器”本质是前端交互界面 + CSS 字符串拼接逻辑，不是靠 HTML 标签本身。
为什么 background: linear-gradient() 经常不生效
最常见原因是误用简写属性：background 会覆盖已设的 background-image、background-size 等，而渐变本质上是图像层。
- ✅ 正确写法必须显式使用
background-image: linear-gradient(to right, #3b82f6, #8b5cf6); - ❌ 错误写法：
background: linear-gradient(90deg, red, blue)—— 它会清掉你可能加的图标、雪碧图或 SVG 背景 - ⚠️ 若需叠加图片与渐变，必须用逗号分隔：
background-image: linear-gradient(), url(logo.svg); - ⚠️ IE9 及更早版本完全不支持，连
-ms-前缀都无效，必须配background-color作为 fallback
radial-gradient() 的 at center 为什么不能省略
省略 at 时浏览器默认居中，但一旦用户手动拖动圆心位置（比如改成 at 30% 70%），再切回“居中”就必须显式写 at center，否则部分 Chrome 或安卓 WebView 会沿用上次偏移值，导致错位。
- ✅ 安全写法：
radial-gradient(circle at center, #fff, #000) - ❌ 危险写法：
radial-gradient(circle, #fff, #000)—— 在某些旧版 WebView 中失效 - 椭圆渐变用
ellipse时，at后必须跟两个值（如at 20% 30%），单写at center会被忽略 - 生成器内部应缓存上一次的
at值，避免颜色更新时无意义重置形状
动态拼接 gradient 字符串的关键细节
手写死代码不可维护，JS 动态生成的核心是控制格式精度和空格分隔，否则 Safari 旧版或某些 WebView 会解析失败。
- 方向优先用
to right/to bottom这类关键词，比角度更直观；若用户输135deg，直接拼入，不加引号 - 每个颜色节点必须完整：支持
#rgb、rgb()、hsl()、rgba()，但别自动补透明度 ——rgba(0,0,0,0.5)和rgba(0,0,0,0)行为完全不同 - 逗号后必须有空格：
linear-gradient(45deg, red, yellow, blue)，少空格在 Safari 12 以下会出错 - 硬边渐变靠重复位置实现：
red 50%, blue 50%，不是靠 opacity 或其他 hack
兼容性处理不是加前缀就完事
现代项目可直接用标准语法，但若需兼容旧环境，得靠运行时检测，而不是盲目堆前缀。
-
-webkit-gradient(linear, left top, right bottom, from(red), to(blue))是 WebKit 旧语法，Chrome ≥ 26 已废弃，加上反而增大体积 -
filter: progid:DXImageTransform.Microsoft.gradient()和background-image冲突，二者不能共存，必须二选一 - 真正可靠的降级方式是用
CSS.supports('background-image', 'linear-gradient(red, blue)')检测，再决定是否插入 fallback 或 JS 渲染 - iOS Safari 对
repeating-linear-gradient()性能较差，高频更新场景建议禁用或降级为普通线性渐变
渐变生成器最难的部分不在 UI 拖拽，而在状态同步粒度：角度、方向、色标位置、at 偏移、颜色格式——任意一项没对齐，复制出去的代码就可能在某个设备上失效。很多人卡在“看着预览是对的，粘过去就不行”，问题往往出在空格、单位隐式转换或 fallback 缺失上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
