radial-gradient实现放射状背景需显式设置shape、size、position等参数，否则默认值易导致视觉失控；四象限分区需四层circle closest-side渐变叠加并设background-blend-mode:normal；Safari兼容性差且性能开销大，复杂场景应优先考虑伪元素替代方案。
radial-gradient 能实现放射状背景，但默认是圆形渐变、中心起始、白色到透明——直接写 background: radial-gradient(...) 很容易只看到一团模糊白晕，不是你想要的“布局感”。
radial-gradient 的核心参数顺序不能乱
浏览器按固定顺序解析参数：radial-gradient([shape] [size] at [position], [color-stop1], [color-stop2], ...)。漏掉 at 或位置写错，渐变中心就跑偏；省略 shape 和 size，就用默认的 ellipse farthest-corner，往往撑满整个容器、失去控制力。
- 想让渐变从左上角发散？必须显式写
at 0 0 - 要硬边过渡（比如色块分区），用
color-stop重复同一颜色：#ff6b6b 40%, #ff6b6b 40% - 避免模糊过渡导致视觉混乱，把关键色停点设在整数百分比，别用
42.3%这类难调试的值
用 radial-gradient 模拟“四象限分区”布局
这不是装饰性渐变，而是用它做视觉区域划分——比如左上红、右上蓝、左下绿、右下黄。靠单层 radial-gradient 做不到，得叠加四层，每层用 circle + 精确 at 定位 + closest-side 控制大小。
background: radial-gradient(circle closest-side, #ff6b6b 0%, #ff6b6b 100%) at 0 0, radial-gradient(circle closest-side, #4ecdc4 0%, #4ecdc4 100%) at 100% 0, radial-gradient(circle closest-side, #ffbe0b 0%, #ffbe0b 100%) at 0 100%, radial-gradient(circle closest-side, #fb5607 0%, #fb5607 100%) at 100% 100%; background-blend-mode: normal;
注意：closest-side 让圆半径刚好触到最近的边，不会溢出；background-blend-mode: normal 关键，否则默认叠加模式会让颜色变灰。
立即学习“前端免费学习笔记（深入）”；
性能和兼容性陷阱
Chrome/Firefox/Edge 新版本都支持，但 Safari 15.4 之前对 closest-side 和多层 radial-gradient 解析不稳定——页面可能闪白或某一层失效。
- 上线前务必在真机 Safari 测试，尤其 iOS 15.x 设备
- 避免在滚动容器（如
overflow: auto）里用复杂radial-gradient，重绘开销高，滑动易掉帧 - 如果只是需要静态分区效果，用伪元素
::before+ 绝对定位四个色块，反而更稳、更轻量
真正难的不是写出语法正确的 radial-gradient，而是判断什么时候它该被放弃——比如当你要适配老 Safari，或背景要随容器缩放还保持比例，或设计师给的“放射”其实只是四个带角度的三角形。这时候硬套 radial-gradient 只会让问题更绕。
