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

【问题标题】：How to add small circle into big circle in css3?如何在css3中将小圆圈添加到大圆圈中？
【发布时间】：2016-09-08 21:28:37
【问题描述】：

这是我的小圆圈代码：

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

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

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

我可以知道，怎么做？

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

【问题讨论】：

喜欢this?
是的@harry。 ..但我的大圈子应该有四个分区，请问，我怎么能分开？
jsfiddle.net/ivangrs/x74ce00k 使用伪元素的版本
哦，我看到了@rish。届时将投票重新开放。您有想要实现的图像或形状吗？
@rish 这个问题越来越不清楚了。请确保您首先提供所有要求。正如您所看到的，答案是根据您在 biginning 中指定的要求做出的。既然你改变了它们，它们就不再正确了。对于那些花费时间和精力来帮助您的人来说，这可能会很烦人。

标签： javascript jquery css css-shapes

【解决方案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;
}

&lt;div id="circle"&gt;&lt;/div&gt;

未来读者注意：这可能不是最好的，这取决于您的需要，因为内圈是使用 box-shadow 生成的。因此，例如，如果您想要其中的图像，那么这种方法将行不通。

同样，如果您希望圆圈周围的四个独立区域可以通过不同的操作进行点击，那么这种方法也行不通。

【讨论】：

那么怎么做，围绕圆圈的四个分隔区域可以用不同的动作点击？我还需要这个。 @harry：你能帮帮我吗？谢谢
为此你需要不同的元素@rish
这不打扰我@harry：你能出示任何样品吗？
@rish：我建议您在this thread 中查看chipChocolate.py 的答案和ThePragmatick 的答案。您的需求似乎几乎相同。
@Harry: 你能看看这个链接吗stackoverflow.com/questions/28718697/…

【解决方案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;
}

&lt;div id="circle"&gt;&lt;/div&gt;

这甚至适用于 IE8！

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

您可以通过在:before 和:after 伪元素上使用边框来进行更多设置。

另请注意，这将在不支持 border-radius 的浏览器中工作，但会显示为正方形。

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

【讨论】：

【解决方案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; 
}

&lt;div id="circle"&gt;&lt;/div&gt;

【讨论】：

【解决方案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/

【讨论】：

【解决方案5】：

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

【讨论】：

我需要在这些圆圈之间留一些空间。我需要像我发布的 jsfiddle 一样的四个分区。
@rish，请编辑您的问题并发布预期结果的图片

【解决方案6】：

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

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

&lt;div class="circle"&gt;&lt;/div&gt;

【讨论】：

【解决方案7】：

这是你要找的东西吗：

#circle:after;

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

【讨论】：

【解决方案8】：

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

【讨论】：

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