这个CSS如何产生一个圆圈？

Question

这是CSS:

div {
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}

它如何产生下面的圆圈？

假设,如果矩形宽度为180像素,高度为180像素,那么它将如下所示:

应用border-radius 30像素后,它将显示如下:

矩形变得越来越小,也就是说,如果半径大小增加,矩形几乎会消失.

那么,180像素的边框如何height/width-> 0px变成半径为180像素的圆？

Answer 1

高度/宽度 - > 0px的180像素边框如何变成半径为180像素的圆？

让我们将其重新分为两个问题:

在哪里width,height实际适用？

让我们来看看典型盒子(来源)的区域:

在height和width只在内容应用,如果正确的盒模型被使用(没有怪癖模式,没有旧的Internet Explorer).

哪里border-radius适用？

该border-radius应用在边框边缘.如果既没有填充也没有边框,它将直接影响您的内容边缘,这将导致您的第三个示例.

这对我们的边界半径/圆圈意味着什么？

这意味着您的CSS规则会生成一个仅包含边框的框.您的规则规定此边框的每边最大宽度应为180像素,而另一方面,它应具有相同大小的最大半径:

在图片中,元素的实际内容(小黑点)实际上是不存在的.如果你没有申请任何border-radius你最终将绿色框.该border-radius给你的蓝色圆圈.

如果border-radius 仅应用于两个角落,则更容易理解:

#silly-circle{
    width:0; height:0;
    border: 180px solid red;
    border-top-left-radius: 180px;
    border-top-right-radius: 180px;
}

因为在您的示例中,所有角/边框的大小和半径相等,所以您得到一个圆.

更多资源

参考

• W3C:CSS背景和边框模块3级(特别是5.圆角)

示威

• 请打开下面的演示,其中显示了如何border-radius影响边框(将内部蓝色框视为内容框,将内部黑色边框视为填充边框,将空白空间视为填充,将巨大的红色边框视为,以及边界).内框和红色边框之间的交叉点通常会影响内容边缘.

var all = $('#TopLeft, #TopRight, #BottomRight, #BottomLeft');

all.on('change keyup', function() {
  $('#box').css('border' + this.id + 'Radius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
});

$('#total').on('change keyup', function() {
  $('#box').css('borderRadius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
  all.val(this.value);
  all.each(function(){$('#' + this.id + 'Text').val(this.value + "%");})
});

#box {
  margin:auto;
  width: 32px;
  height: 32px;
  border: 100px solid red;
  padding: 32px;
  transition: border-radius 1s ease;
  -moz-transition: border-radius 1s ease;
  -webkit-transition: border-radius 1s ease;
  -o-transition: border-radius 1s ease;
  -ms-transition: border-radius 1s ease;
}
#chooser{margin:auto;}
#innerBox {
  width: 100%;
  height: 100%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <div id="innerBox"></div>
</div>
<table id="chooser">    
  <tr>
    <td><label for="total">Total</label></td>
    <td><input id="total" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="totalText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopLeft">Top-Left</label></td>
    <td><input id="TopLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopLeftText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopRight">Top right</label></td>
    <td><input id="TopRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomRight">Bottom right</label></td>
    <td><input id="BottomRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomLeft">Bottom left</label></td>
    <td><input id="BottomLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomLeftText" value="0" type="text" /></td>
  </tr>
  <caption><code>border-radius</code> values. All values are in percent.</caption>
</table>
<p>This demo uses a box with a <code>width/height</code> of 32px, a <code>padding</code> of 32px, and a <code>border</code> of 100px.</p>

Answer 2

演示

让我们用这个图片演示以另一种方式检查这个问题:

我们先看看边界半径是如何产生的？

要产生半径,它需要边界的两边.如果将border-radius设置为50像素,则一侧需要25个像素,另一侧需要25个像素.

并从每一侧取25像素,它会产生如下:

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 50px 0 0;
}

现在看看在一个角落应用多少广场需要多少？

最高可能需要180像素,右边需要180像素.然后它会产生这样的:

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 0 0;
}

如果我们设置半径的非等值,它会如何产生？

假设,如果仅将边界半径不均匀地应用于两个角:

• 右上角到180像素

• 右下角到100像素

然后它需要

• 右上角:从顶部开始90像素,从右边开始90像素

• 右下角:右边50像素,底部50像素

然后就会产生这样的效果

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 100px 0;
}

它的边界最大可以用于四面八方？看看它是如何产生一个圆圈的？

它可能需要最多一半的边框大小,即180像素/ 2 = 90像素.然后它会产生这样的圆圈

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 180px;
}

为什么只需要一半的正方形适用于所有方面？

因为所有角落都必须平等地设置它们的半径值.

取其边界相等的部分,它会产生一个圆圈.