这是我的小圈子代码：
<div id="circle"></div>
#circle {
width: 40px;
height: 40px;
background: green;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
这是大圆圈的jsfiddle链接：http://jsfiddle.net/x1n15791/14/
我需要将小圆圈放入中心位置的大圆圈中。
试穿后，我需要在小圆圈和大圆圈之间留一些空间。
我可以知道怎么做吗？
任何帮助将不胜感激。提前致谢。
最佳答案
使用下面提到的方法，可以实现使一个内圆被一个外圆（具有四个扇区）包围并且在该内圆和外圆之间具有一定间隔的效果。
基本上，我保留了每个边框的边框颜色，然后向circle元素添加了height和width。这使元素在分隔的边框内部的中间保留一个圆形区域。在内部圆形区域内，使用我之前链接的两篇文章中提到的inset box-shadow技术添加了另一个圆形。
#circle {
width: 40px;
height: 40px;
border-bottom: 40px solid black;
border-top: 40px solid black;
border-left: 40px solid green;
border-right: 40px solid red;
border-radius: 50%;
background: blue;
box-shadow: inset 0px 0px 0px 10px white;
}<div id="circle"></div>致将来的读者注意：根据您的需要，这可能不是最好的，因为内圆是使用盒形阴影生成的。因此，例如，如果您想在其中包含图像，则此方法将行不通。
同样，如果您希望通过不同的操作单击圆上的四个分开的区域，则此方法也将无效。
关于javascript - 如何在css3中将小圆圈添加到大圆圈？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28716624/