如何在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 link：http://jsfiddle.net/x1n15791/14/

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

并且在拟合之后，我需要一些space在小圆圈和大圆圈之间。

我可以知道怎么做吗？

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

这是一个纯粹的 CSS 解决方案：

HTML:

<div id="container">
  <div id="circle">
      <div id="small-circle">
      </div>
  </div>
</div>

CSS:

#container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#circle {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color:green;
  border-radius: 50%;
}

#small-circle{
  margin-top: 25%;
  margin-left: 24%;
  position: absolute;
  width: 45%;
  height: 45%;
  background-color: #4d4d4d;
  border-radius: 50%;   
  border:10px solid black;
}

演示：http://jsfiddle.net/RV5b4/228/

Answer 2

.circle { 
   width: 100%;
   height: 100%;

   -moz-border-radius: 50%; 
   -webkit-border-radius: 50%; 
   border-radius: 50%;

  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;   
  box-sizing: border-box;       
}

.circle.one{
  width:400px;
  height:400px;
  background:#440000;
  padding:40px;
}

.circle.two{
  background:#662222;
    padding:80px;
}
.circle.three{
  background:#884444;
    padding:20px;
}
.circle.four{
  background:#ff8888;
}

<div class="circle one">  
    <div class="circle two">
      <div class="circle three">
        <div class="circle four">
        </div> 
      </div> 
    </div>  
</div>

Answer 3

这是一个完整的 CSS 解决方案，不需要额外的标记：

#circle { 
  position: relative;
  width: 400px;
  height: 400px;
  background: green; 
}
#circle,
#circle:before,
#circle:after {
  -moz-border-radius: 100%; 
  -webkit-border-radius: 100%; 
  border-radius: 100%;
}
#circle:before,
#circle:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#circle:before {
  width: 60%;
  height: 60%;
  background: white; 
}
#circle:after {
  width: 50%;
  height: 50%;
  background: yellow; 
}

<div id="circle"></div>

Answer 4

只需 CSS 即可轻松实现：

#circle { 


 width: 400px;
   height: 400px;
   background: green; 
   -moz-border-radius: 200px; 
   -webkit-border-radius: 200px; 
   border-radius: 200px;
    position: relative;
}
#circle:before{
    display: block;
    content: '';
    width: 100px;
    height: 100px;
    background: white; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px;    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

http://jsfiddle.net/x1n15791/17/

Answer 5

这是一个 100% 纯的 css 示例：

这非常有效：

#circle, #circle:before, #circle:after {
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 display: block;
}

#circle:before, #circle:after {
 position: relative;
 content: '';
}

#circle { 
 width: 100px;
 height: 100px;
 background: white;
 border: 20px solid blue;
}

#circle:before {
 width: 50%;
 height: 50%;
 top: 25%;
 left: 25%;
 background: red;
}

#circle:after {
 width: 20%;
 height: 20%;
 top: -10%;
 left: 40%;
 background: green;
}

<div id="circle"></div>

这甚至适用于 IE8！

如果您需要设置不同的尺寸，请更改 #circle 的 width 和 height。

您可以通过在 :before 和 :after 伪元素上设置边框来设置更多内容。

另请注意，这将适用于不支持 border-radius 的浏览器，但会显示为正方形。

中心点可能需要一些调整。

Answer 6

外圈包围内圈（有四个扇区），内外圈之间有space的效果可以用下面的方法实现。

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

Answer 7

这是您要找的吗：

#circle:after;

http://jsfiddle.net/johanthuresson/x1n15791/23/

Answer 8

这是一个简单而纯粹的 CSS 解决方案，它使用 border 和 box-shadow 属性

.circle
{
  height:70px;
  width:70px;
  background-color:red;
  border:24px solid white;
  box-shadow: 0px 0px 0px 24px blue;
  border-radius:50%;
}

<div class="circle"></div>

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

How to add small circle into big circle in css3?

javascript

css

jquery

css-shapes