单层 radial-gradient 无法真正嵌套同心圆，因其返回单个图像值、不支持子渐变；只能通过 color stops 硬切换（如 #3498db 0%, #3498db 20%, #e74c3c 20%）模拟分层圆环，或多背景叠加实现视觉伪嵌套。
直接用单层 radial-gradient() 无法实现真正“嵌套”的同心圆颜色效果——它本质是一次性绘制一个渐变图像，不是多个独立可调的圆环。所谓“嵌套”，实际是靠精确控制颜色停止点（color stops）在不同半径位置的硬切换来模拟视觉分层。
为什么不能真嵌套？
radial-gradient() 返回的是单个 CSS 图像值，不支持子渐变或递归定义。你写的多个 radial-gradient() 只能通过多背景叠加（background-image: g1, g2, g3）实现视觉叠加，但每层仍是独立渐变，不是“一个渐变里再画一个渐变”。
- 浏览器解析时，所有 color stops 都映射到同一个从中心出发的半径轴上
- 写成
red 0%, red 10%, blue 10%, blue 20%这种“色块式”写法，才是模拟同心圆环的关键 - 试图用
radial-gradient(circle, radial-gradient(...))会报语法错误——函数不接受图像值作为参数
用 color stops 模拟多层同心圆
核心技巧：在单个 radial-gradient() 中，让同一颜色在两个紧邻百分比处重复出现，形成无过渡的“硬边圆环”。例如：
background: radial-gradient( circle at center, #3498db 0%, #3498db 20%, #e74c3c 20%, #e74c3c 40%, #2ecc71 40%, #2ecc71 60%, transparent 60% );
- 0%–20% 是第一层实心圆（蓝色），20%–40% 是第二层（红色），依此类推
- 每个圆环厚度 = 后一个 stop % − 前一个 stop %，比如 40% − 20% = 20% 宽度
- 必须用
transparent收尾，否则最后一层会填满整个容器 - 容器本身需设
border-radius: 50%，否则渐变溢出显示为椭圆
多背景叠加实现更灵活的“伪嵌套”
当需要每层圆环有不同模糊、偏移或缩放时，就得用多层 background-image。例如：
立即学习“前端免费学习笔记（深入）”；
.concentric {
width: 200px;
height: 200px;
border-radius: 50%;
background-image:
radial-gradient(circle at center, #f1c40f 0%, #f1c40f 15%, transparent 15%),
radial-gradient(circle at center, #2ecc71 0%, #2ecc71 25%, transparent 25%),
radial-gradient(circle at center, #e74c3c 0%, #e74c3c 35%, transparent 35%);
background-size: 200px 200px, 220px 220px, 240px 240px;
background-position: center, center, center;
}
- 三层渐变分别控制三个圆环，
background-size决定每层直径 - 注意：CSS 多背景是从后往前绘制，第一行背景在最底层
- 如果某层需要阴影或模糊，得另加
box-shadow或滤镜，radial-gradient本身不支持 - 性能上，超过 4–5 层叠加可能在低端设备引发重绘延迟
容易忽略的兼容性与降级问题
老版本 Safari（≤15.6）和部分安卓 WebView 对 radial-gradient 的 at 语法支持不稳定，且不支持透明色 stop。
- 务必提供纯色 fallback：
background: #3498db; background: radial-gradient(...); - 避免写
rgba(0,0,0,0)，改用transparent—— 更早版本只认后者 - 不要依赖
closest-corner等 size 关键字，它们在 Firefox 旧版中行为不一致 - 移动端测试时，检查是否因视口缩放导致
background-size计算偏差
真正复杂的同心圆效果，最终往往要混合 box-shadow、伪元素和 radial-gradient，而不是只押注一个方案。哪一层需要交互响应、哪一层只需装饰、哪一层要适配深色模式——这些需求决定了你该在哪一层用什么技术。
