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);
立即学习“前端免费学习笔记（深入）”；
