linear-gradient需写明方向（如to right）和合法颜色值，逗号分隔且末尾无多余逗号；radial-gradient用circle/ellipse at x y控制圆心，尺寸参数用closest-side等；多层背景须合并到单个background-image并用逗号分隔。
linear-gradient 怎么写才不会白屏
浏览器遇到 linear-gradient 语法错误时，常直接忽略整个背景声明，导致背景变白或回退到默认色——这不是渐变失效，而是 CSS 解析失败。最常见原因是漏写方向关键词或颜色值格式不合法。
- 方向必须明确：用
to top、to bottom right，别只写top（旧语法已废弃） - 颜色之间必须用逗号分隔，末尾不能多逗号；
rgba(0,0,0,0.2)比transparent更可控（后者在某些 Safari 版本中渲染异常） - 示例正确写法：
background: linear-gradient(to right, #ff9a9e, #fad0c4);
radial-gradient 圆心位置和尺寸怎么控制
radial-gradient 默认是椭圆渐变且圆心在中心，但实际项目里经常需要偏移圆心或限定范围，否则在响应式布局中容易“跑偏”。关键在前两个参数：形状 + 圆心坐标。
- 形状可选
circle（正圆）或ellipse（椭圆），不写则按容器宽高自动推导 - 圆心用
at x y指定，比如at 20% 30%表示距左 20%、距顶 30% 的位置 - 尺寸（第三个参数）影响渐变覆盖范围，常用
closest-side（到最近边）或farthest-corner（到最远角）；数值如50px会强制半径 - 示例：
background: radial-gradient(circle at 30% 70%, #6a11cb, #2575fc);
渐变叠加背景图时为什么图片不见了
当同时设置 background-image 多层值（如渐变 + PNG），容易误以为要用多个 background-image 声明——其实必须合并进同一个属性，用逗号分隔，且顺序决定图层上下关系（前在上，后在下）。
- 错误写法：
background-image: linear-gradient(...); background-image: url(logo.png);→ 后者覆盖前者 - 正确写法：
background-image: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent), url(logo.png); - 注意：如果 PNG 有透明区域，底层渐变才能透出；若 PNG 不透明，渐变会被完全遮住
兼容性差的写法有哪些
老版本 Chrome/Safari 对无单位角度（如 45deg）支持好，但 IE 完全不认；Firefox 曾对 to left 解析异常。真正稳妥的做法是避开模糊语法，优先使用标准方向关键词 + 显式单位。
立即学习“前端免费学习笔记（深入）”；
- 避免：
linear-gradient(45, red, blue)（缺单位，IE/旧 Firefox 报错） - 避免：
linear-gradient(left, red, blue)（left是旧语法，应写to right） - 推荐加一层兜底色：
background: #f0f0f0; background: linear-gradient(to bottom, #f0f0f0, #ccc); - 如需支持 IE10+，可加
-webkit-前缀，但现代项目基本可省略
