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技术添加了另一个圆圈。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

未来读者注意事项：根据您的需要，这可能不是最好的，因为内圈是使用box-shadow生成的。因此，例如，如果你想在里面有一个图像，那么这种方法是行不通的。

同样，如果您希望圈子周围的四个分隔区域可以使用不同的动作进行点击，那么这种方法也无法使用。

Answer 2

这是一个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！

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

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

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

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

Answer 3

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

screen shot

Answer 4

这是一个完整的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 5

只需使用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 6

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

这是一个纯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 8

这就是你要找的东西：

#circle:after;

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

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

8 个答案: