linear-gradient写法错误会导致浏览器丢弃整条声明而白屏，需用to top等方向语法、合法颜色值、百分比停止点；radial-gradient需显式声明圆心和尺寸；background-color必须写在渐变前或用独立属性；IE11需-ms-前缀且仅支持to语法。
linear-gradient 怎么写才不会白屏
浏览器遇到语法错误的 linear-gradient 会直接丢弃整条背景声明，导致背景变透明或继承父级颜色，看起来像“白屏”。关键在方向参数和颜色停止点的写法。
- 方向别写错：
to top（推荐）比0deg更易读；to bottom right是合法的，但bottom-right（缺to）会失效 - 颜色值必须带单位或关键字：
#fff、rgb(255,255,255)、transparent都行，但white要确认是否在当前 CSS 环境中被定义（某些重置样式表可能删了它） - 停止位置别超 100%：
red 0%, blue 200%合法，但blue 200px在容器宽高不确定时容易截断渐变，优先用百分比或无单位数值
示例：横向蓝到紫渐变 —— background: linear-gradient(to right, #4a90e2, #9b59b6);
radial-gradient 的圆心和尺寸怎么控制
radial-gradient 默认是 ellipse at center，但多数人想要的是正圆+精准定位，必须显式声明。
- 圆心位置用
at：比如radial-gradient(circle at 30% 40%, #ff6b6b, #4ecdc4)表示圆心在容器横轴 30%、纵轴 40% 处 - 尺寸类型有
closest-side、farthest-corner等，但它们响应式行为不稳定；更可控的是直接写circle 50px或ellipse 100px 60px - 注意：如果容器尺寸为 0（比如空 div 未设高宽），
radial-gradient会渲染失败，背景不可见
示例：居中 80px 半径的红白放射渐变 —— background: radial-gradient(circle 80px at center, #ff6b6b, #fff);
立即学习“前端免费学习笔记（深入）”；
渐变背景和 background-color 能不能共存
可以，但顺序很重要：background-color 必须写在 linear-gradient 或 radial-gradient **之前**，否则会被覆盖。
- 正确写法：
background: #f0f0f0, linear-gradient(to bottom, #fff, #eee);（逗号分隔，颜色层在前） - 错误写法：
background: linear-gradient(...), #f0f0f0;—— 渐变层会盖住纯色，纯色无效 - 更稳妥的做法是把纯色当 fallback：
background-color: #f0f0f0; background-image: linear-gradient(...);
这是因为 CSS 解析时，background 是简写属性，后写的子属性会覆盖先写的；而 background-color 和 background-image 是独立属性，互不干扰。
IE11 兼容 linear-gradient 要不要加 -ms- 前缀
要，但仅限老式写法。IE11 支持标准 linear-gradient，但只认 to top 这种语法，不支持 0deg；同时必须加 -ms- 前缀才能生效。
- 兼容写法示例：
background: -ms-linear-gradient(top, #4a90e2, #9b59b6);background: linear-gradient(to top, #4a90e2, #9b59b6); - IE10/11 不支持
radial-gradient的closest-corner等关键词，建议降级为固定尺寸 +at定位 - 如果项目已放弃 IE，就别加前缀——现代打包工具（如 PostCSS）自动处理，手动加反而可能引入冗余
真正容易被忽略的是：渐变作为 background-image，在 background-size 或 background-repeat 配合使用时，尺寸计算逻辑和纯色完全不同，尤其做平铺渐变时得反复调数值。
