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

让我们将其重新表述为两个问题：

在哪里width实际height应用？

让我们看一下典型盒子的区域（来源）：

和height仅width适用于内容，如果正在使用正确的盒子模型（没有怪癖模式，没有旧的 Internet 资源管理器）。

在哪里border-radius申请？

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

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

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

在图片中，您的元素（小黑点）的 实际内容实际上是不存在的。 如果你没有申请任何border-radius你最终会得到绿色框。给border- radius你蓝色圆圈。

如果将border-radius only 应用于两个角，则更容易理解：

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

  }

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

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

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

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

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

  border-radius values. All values are in percent.

  This demo uses a box with a width/height of 32px, a padding of 32px, and a border of 100px.