重叠的CSS 1个div的圈子

我正在寻找在CSS中创build这个重叠的圆形状：

基本上，只是堆积圈。 我环顾四周，我看到的所有解决scheme包括使用多个div元素的效果。 但是，这不能用一个单独的div，使用CSS3？ 我看着它是如何轻松完成的，并且认为，如果所有的颜色都一样的话，你会得到这样的药丸形状：

http://jsfiddle.net/5wytm0r4/

#circles { background-color: red; width: 130px; height: 100px; border-radius: 50px; } 

 <div id="circles"></div> 

然后简单地画几个四分之一的卫星，你就完成了。 但是，我无法弄清楚如何在我的胶囊形格中绘制这些月亮形状。

Answer 1

用CSS框阴影

您可以在圆形div上使用多种颜色的多个阴影 。 他们需要用逗号隔开：

 #circles { background-color: red; width: 100px; height: 100px; border-radius: 50%; box-shadow: 10px 0 0 -2px #f8ff00, 20px 0 0 -4px #009901, 30px 0 0 -6px #3531ff; } 

 <div id="circles"></div> 

Answer 2

可以一起使用CSS3多个背景图像和径向渐变 ：

 #circles { width: 115px; height: 100px; background-image: radial-gradient(circle at 50px 50px, #F00 0, #F00 50px, transparent 50px), radial-gradient(circle at 55px 50px, #FF0 0, #FF0 50px, transparent 50px), radial-gradient(circle at 60px 50px, #080 0, #080 50px, transparent 50px), radial-gradient(circle at 65px 50px, #00F 0, #00F 50px, transparent 50px); } 

 <div id="circles"></div> 

Answer 3

或者，如果你感到疯狂，你可以制作一个svg并将其作为背景图像内联使用：

 #circles { width: 120px; height: 100px; background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle fill='blue' cy='50' cx='70' r='50' /><circle fill='green' cy='50' cx='65' r='50' /><circle fill='yellow' cy='50' cx='60' r='50' /><circle fill='red' cy='50' cx='55' r='50' /></svg>"); } 

 <div id="circles"></div>