html中div标签重叠,html – 在CSS中与1 div重叠的圆圈

与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

它看起来像这样：