Question

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

Answer 1

您可以将外部元素定义为position：relative，将内部元素定义为absolute。保证金将完成彼此之间的距离。

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

Answer 2

如果您愿意使用固定的宽度和高度，那就很容易了。

<!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的border-radius需要是其外部宽度的一半（其中outer width = width +（padding x 2））。

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

Answer 3

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

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

Answer 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+ */
}

圆形div内的圆形div

4 个答案: