css径向渐变画多个园

在CSS中，径向渐变可以创建多个相互连续的圆形或椭圆形的渐变效果，非常适合用于绘制多个园的图形。本篇文章将为您详细介绍如何使用CSS径向渐变画多个园。

.circle1 {
  /* 定义一个半径为50px的圆形 */
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center,#f00 0%,#f00 50%,#fff 50%);
  border-radius: 50%;
}

.circle2 {
  /* 定义一个半径为50px的圆形，并设置阴影效果 */
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center,#fff 0%,#fff 50%,#f00 50%);
  Box-shadow: 0 5px 5px rgba(0,0.3);
  border-radius: 50%;
}

.circle3 {
  /* 定义一个半径为50px的圆形，并设置渐变效果 */
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center,#f00 30%,#ff0 70%,#ff0 100%);
  border-radius: 50%;
}

.circle4 {
  /* 定义一个半径为50px的圆形，并设置多重渐变效果 */
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center,#ff0 30%,#ff0 50%,#0f0 50%,#0f0 70%,#00f 70%,#00f 100%);
  border-radius: 50%;
}

以上代码中，.circle1至.circle4分别对应了四个不同的圆形，每个圆形都使用了radial-gradient方法来设置径向渐变效果。其中，circle at center表示圆心位于中心点，可以根据需要调整不同的圆心位置；后面的百分比表示了颜色的渐变范围，可以根据需要设置不同的颜色渐变方案。

在以上代码中，.circle2还使用了Box-shadow来为圆形添加阴影效果，.circle4则使用了多重渐变效果，让圆形更加丰富多彩。

使用CSS径向渐变可以轻松绘制多个园形，同时还能为园形添加不同的颜色、渐变效果和阴影效果，让页面更加生动有趣。