javascript - 如何在css3中将小圆圈添加到大圆圈中？

Question

这是我的小圆圈代码:

<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/

我需要将小圆圈放入中心位置的大圆圈中。

在拟合之后，我需要在小圆圈和大圆圈之间留出一些空间。

我可以知道怎么做吗？

任何帮助将不胜感激。提前致谢。

Answer 1

内圈被外圈包围(有四个扇区)，内圈和外圈之间有一些空间的效果可以使用下面提到的方法来实现。

基本上，我保留了每个边框的边框颜色，然后向圆形元素添加了 height 和 width。这使得元素在分离的边界内的中间留下一个圆形区域。在内部圆形区域内，使用我之前链接的两个帖子中提到的插入 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>

Note for Future readers: This may not be the best depending on your needs because the inner circle is produced using box-shadow. So for instance, if you want an image inside it then this approach would not work.

Similarly if you want the four separated areas on around the circle to be clickable with different actions then also this approach will not work.