html - 这个 CSS 是如何产生一个圆圈的？

Question

这是CSS：

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

它是如何产生下面的圆圈的？

假设，如果一个矩形宽度为 180 像素，高度为 180 像素，那么它将如下所示：

应用边界半径 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 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;
}

<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

演示

让我们通过这张图片演示以另一种方式来研究这个问题：

我们先看看边界半径是怎么产生的？

为了产生半径，它需要边界的两侧。如果您将边框半径设置为 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;
}

为什么只需要一半的正方形就可以应用于所有方面？

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

取其边界的相等部分，它产生一个圆圈。

Answer 3

我认为它最初创建矩形，height and width = 180px然后创建具有给定半径的曲线，就像30px每个角一样。所以它设置border为 given radius。

Answer 4

边框是任何内容的外框，如果您在其上应用半径，它将简单地产生圆形边缘。

Answer 5

两者都.a将.b给出相同的输出。

问：我为什么使用width: 360px; height: 360px;？

A.border: 180px solid red;在类似的.a作品中border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */。

希望这个小提琴可以帮助您理解这个概念。

.a{
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}
.b{
    background:red;
    width: 360px;
    height: 360px;
    border-radius: 180px;
}