css3画同心圆

CSS3是现在Web设计中不可或缺的一种技术，其中一项很酷的特性就是可以使用CSS3画同心圆。

首先，我们需要为同心圆创建一个容器：

    <div class="circle-container"></div>

接下来，我们需要使用CSS3中的Box-shadow属性来创建同心圆。Box-shadow可以用来创建阴影效果，也可以用来绘制形状。

    .circle-container {
        width: 200px;
        height: 200px;
        Box-shadow: 
            0 0 0 10px red,0 0 0 20px yellow,0 0 0 30px green,0 0 0 40px blue;
    }

上述代码将会创建四个同心圆，分别为红色、黄色、绿色和蓝色。关键是，我们将第四个阴影的距离设置为40px，这样便能创建出四个同心圆。

我们也可以根据需要改变每个阴影的颜色、大小和位置。