如何在CSS中实现复杂的同心圆颜色效果_利用radial-gradient嵌套-css教程-PHP中文网

单层 radial-gradient 无法真正嵌套同心圆，因其返回单个图像值、不支持子渐变；只能通过 color stops 硬切换（如 #3498db 0%, #3498db 20%, #e74c3c 20%）模拟分层圆环，或多背景叠加实现视觉伪嵌套。

如何在css中实现复杂的同心圆颜色效果_利用radial-gradient嵌套

直接用单层 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。例如：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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;
}