与CSS框阴影
您可以在圆角的div上使用多种颜色的多个box-shadows。它们需要用逗号分隔:
#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;
}
输出:
浏览器对box-shadows的支持是IE9(更多信息参见canIuse)
您还可以使重叠的圆形根据视口的宽度响应vw units:DEMO
#circles {
background-color: red;
width: 20vw;
height: 20vw;
margin: 0 auto;
border-radius: 50%;
box-shadow: 2vw 0 0 -0.4vw #f8ff00,
4vw 0 0 -0.8vw #009901,
6vw 0 0 -1.2vw #3531ff;
}
浏览器支持vw单位是IE9(更多信息,请参阅canIuse)
与SVG
另一种方法是使用内联svg与元素。
这是响应根据父的大小和browser support goes back to IE9像box-shadows:
svg{width:80%;}
我还扩展了SVG版本,使一个动画“蠕虫”与更多重叠的圆。你可以在这支钢笔中看到:animated worm
它看起来像这样: