内联样式中linear-gradient失效通常因三方面：未写background-image前缀、颜色值格式错误（如hsl空格或rgba缺a）、方向参数拼写错误（如botton）。
内联样式里写 linear-gradient 会失效？检查这三点
直接在 style 属性里用 linear-gradient 是完全可行的，但很多人写完没效果，通常卡在这几个地方：
- 漏写了
background-image前缀，只写了background: linear-gradient(...)—— 这样会被当成background-color解析，渐变不生效 - 颜色值用了不支持的格式，比如
hsl(200 100% 50%)（旧版 Safari 不认空格分隔的 hsl）或带 alpha 的rgba()写成rgb(0,0,0,0.5)（少了个a） - 方向参数用了中文或错别字，比如
to botton、left to right（正确是to left或90deg）
正确写法必须显式指定 background-image：
div style="background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);"
linear-gradient 在内联样式中的兼容性底线
IE 10+、Edge 12+、Chrome 26+、Firefox 16+、Safari 6.1+ 都支持标准语法，但 Safari 6.1–9 对角度单位和颜色函数比较敏感：
- 避免用
turn或grad单位，统一用deg - Safari 9 及更早版本不支持
hwb()、lab()等新颜色函数，老项目慎用 - 如果要兼容 IE 9 及以下，内联样式里根本不能用
linear-gradient，它不支持滤镜 fallback，得换方案
移动端基本不用操心，iOS 7+ 和 Android 4.4+ 都稳。
立即学习“前端免费学习笔记（深入）”；
内联渐变和 CSS 类里的写法有啥区别？
语法上完全一致，但内联样式优先级更高，会覆盖外部类定义的 background-image。容易踩的坑是：
- 动态生成 HTML 时，拼接字符串漏了引号或括号，比如：
style="background-image: linear-gradient(to bottom, 'red', 'blue')"—— 单引号在 HTML 属性里会提前截断 - 服务端模板（如 Jinja、EJS）里未转义括号或逗号，导致解析失败
- 用 JS 设置
element.style.backgroundImage = 'linear-gradient(...)'时，忘了加background-image:前缀（JS 中必须带）
JS 示例（注意引号嵌套）：
el.style.backgroundImage = "linear-gradient(to right, #3498db, #2ecc71)";
为什么有时候加了 linear-gradient 背景还是看不见？
最常见原因是元素没有尺寸或内容撑开：
- 空
div默认高为 0，渐变画不出来；得手动设height、min-height或加 - 父容器
overflow: hidden且子元素用了transform，可能裁掉渐变区域 - 渐变色之间对比太弱，比如
#f0f0f0到#e8e8e8，肉眼难分辨 - 用了
background: linear-gradient(...) no-repeat却没设background-size，导致只显示左上角一小块
调试建议：先用高对比色（如 red→blue），确认能显示后再换真实色值。
内联渐变本身不复杂，但每个字符都得对——少个括号、多一个空格、引号嵌套错一层，就白写了。
