父圆形 div 内的圆形 div答案

【问题标题】：Round divs inside a parent round div父圆形 div 内的圆形 div
【发布时间】：2016-02-14 03:47:32
【问题描述】：

我想问是否可以将圆角 div 插入圆形 div。它们应该以循环方式插入，一个接一个。我想创建一个圆形 div 环，而不改变父 div 的大小。如果你知道怎么做，我将不胜感激。

【问题讨论】：

你要两个圆，一大一小里面大一个？
我想要一个大圆圈，以及许多其他人在那个圆圈内创建一个环。小 div 应该留在大 div 的边界。或者我想创建一个由许多圆形 div 组成的环。

标签： html css

【解决方案1】：

您可以将外部元素定义为位置：相对，而将内部元素定义为绝对。边距将起到拉开彼此距离的作用。

.circle{
  width:256px;
  height:256px;
  border-radius:50%;
  background: rgba(255, 99, 71, 0.5);
  border:3px solid white;
  position:relative;
}

.circle >  .circle{
  width:initial;
  height:initial;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  margin:20px;
}

<div class="circle">

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

【讨论】：

如果有人想知道如何让它在 Internet Explorer 下运行，这就是我的回答：stackoverflow.com/questions/20823105/…

【解决方案2】：

<div id="one">
<div id="two"></div></div><style type="text/css">
#one{
    height: 120px;
    width: 120px;
    background: #333;
    border-radius: 60px;
}
#two{
    height: 60px;
    width: 60px;
    background-color: white;
    border-radius: 30px;
    position: absolute;
    top: 35px;
    left: 35px;
}

这将为您工作。根据您的意愿进行调整。

【讨论】：

谢谢。现在我可以在父级中创建许多 div 并通过更改 css: top: px; 来创建一个圆环。左：像素；右：像素；等英雄:)
你有没有注意到你的实现有问题？
嘿极客，这不是我们的作业... 将其视为模板。 :p

【解决方案3】：

如果您乐于使用固定的宽度和高度，这很容易。

<!DOCTYPE html>
<html>

<body>
    <div style="padding: 4px; width: 32px; height: 32px; border-radius: 20px; background-color: red;">
        <div style="padding: 4px; width: 24px; height: 24px; border-radius: 16px; background-color: orange;">
            <div style="padding: 4px; width: 16px; height: 16px; border-radius: 12px; background-color: yellow;">
                <div style="padding: 4px; width: 8px; height: 8px; border-radius: 8px; background-color: green;">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

给他们一个你想要的任何环厚度的填充，然后每个环的宽度和高度都需要（填充 x 2）小于其父级。每个 div 的边框半径需要是其外部宽度的一半（其中外部宽度 = 宽度 + (padding x 2)）。

示例：http://doug.exploittheweb.com/SO/33677891.html

【讨论】：

上面的代码在 div 中创建了圆形 div。我想要圆角 div 来创建一个圆圈，就像一个环

【解决方案4】：

第一种使用相对绝对 div 的方法 https://jsfiddle.net/2Lzo9vfc/67/

HTML

<div class="big-circle">
    <div class="small-circle">
        <div class="extra-small-circle">

        </div>
    </div>
</div>

CSS

.big-circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: black;
}

.small-circle {
    background: red;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50px, -50px);
}

.extra-small-circle {
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-25px, -25px);
}

使用渐变的第二种方式 https://jsfiddle.net/2Lzo9vfc/69/

HTML

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

CSS

.circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

【讨论】：