CSS3 提供了线性渐变和径向渐变的功能，但是直接在 CSS 中实现多重径向渐变是比较复杂的，因为 CSS 不直接支持在一个元素上叠加多个渐变。不过，你可以通过一些技巧来模拟这种效果，例如使用伪元素、背景图像或者 SVG。
下面是一个使用伪元素实现多重径向渐变的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多重径向渐变</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.gradient1, .gradient2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%; /* 使伪元素成为圆形 */
}
.gradient1 {
background: radial-gradient(circle, red, yellow);
opacity: 0.7; /* 调整透明度以显示下面的渐变 */
}
.gradient2 {
background: radial-gradient(circle, blue, green);
}
</style>
</head>
<body>
<div class="container">
<div class="gradient1"></div>
<div class="gradient2"></div>
</div>
</body>
</html>
在这个例子中，我们创建了一个 .container 元素，并在其中放置了两个绝对定位的伪元素 .gradient1 和 .gradient2。每个伪元素都有一个径向渐变背景，并且 .gradient1 的透明度被降低以显示下面的 .gradient2。
注意，这种方法的一个限制是，由于我们使用了透明度，所以上面的渐变会混合下面的渐变颜色。如果你需要更复杂的渐变叠加效果，可能需要考虑使用 SVG 或者其他图形处理工具。
另外，如果你想要一个元素直接应用多重渐变，而不是通过叠加多个元素，你可能需要使用 SVG 或者其他 CSS 预处理器（如 Sass 或 Less）来生成更复杂的渐变代码。在 SVG 中，你可以使用多个 <radialGradient> 元素来创建多重径向渐变，并将其应用到一个形状上。