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

Posted 2023-03-06

【中文标题】这个 CSS 是如何产生一个圆圈的？

【英文标题】：How does this CSS produce a circle?

【发布时间】：2013-04-17 20:09:29

【问题描述】：

这是 CSS：

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

下面的圆圈是怎么产生的？

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

应用边框半径 30 像素后，它会如下所示：

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

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

【问题讨论】：

它是一个 0x0 对象，周围有一个 180 像素的边框，它有圆角。所以圆角是圆的象限。

我有个愚蠢的问题，你为什么要让circle带边框？？？我们可以很容易地用width 和height 制作circle，所以为什么我们要使用border

仅供参考，对于圆形制作，请使用 border-radius: 50% - 使布局正确时更容易调整宽度/高度。

是的女士们，这是一道数学题

【参考方案1】：

我认为它最初使用height and width = 180px 创建矩形，然后使用给定半径创建曲线，例如每个角的30px。 所以它将border 设置为给定的radius。

【参考方案2】：

一个180像素高/宽->0px的边框怎么变成半径180像素的圆？

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

width 和 height 实际适用于哪里？

让我们看看一个典型盒子的区域 (source)：

height 和 width 仅适用于内容，前提是使用了正确的盒子模型（没有怪癖模式，没有旧的 Internet Explorer）。

border-radius 适用于哪里？

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

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

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

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

应用border-radiusonly to two corners会更容易理解：

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

由于在您的示例中，所有角/边框的大小和半径都相等，因此您得到了一个圆。

更多资源

参考文献

W3C：CSS Backgrounds and Borders Module Level 3（尤其是5. Rounded Corners）

示范

请打开下面的demo，它展示了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;

#choosermargin: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>

【讨论】：

我认为 css3-background 没有对 css3-box 进行任何引用（css3-box 正在等待重写）。

@BoltClock：我认为 css3-box 会定义 edges。介绍中只有对 css2.1-box 的引用（非规范），并且给定的图像也在那里，所以 css3-box 并不是真正需要理解border-radius （在重写中会发生什么变化） css3-box 的？）。

@Zeta 我有个愚蠢的问题，为什么你要让circle 带有边框？？？我们可以很容易地用width 和height 制作circle，所以为什么我们要使用border

@Sarfaraz：看看 OP 的问题：“那么，height/width-> 0px 的 180px 边框如何变成半径为 180px 的圆？”。我简单地回答了这个问题。还有其他方法可以创建一个圆圈，但 OP 只对这种特定方法的工作原理感兴趣。

@Zeta：我不确定具体会发生什么变化，但鉴于 WD 已经 6 年没有更新了，我怀疑会有很多。我确实知道第 11 节（overflow 属性系列）现在存在于它自己的模块 css-overflow-3 中，但这还没有反映在 ED 中。您会在 ED 中看到很多问题，但我想这并不是一份详尽的清单：dev.w3.org/csswg/css3-box

【参考方案3】：

.a 和 .b 都会给出相同的输出。

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

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

希望this fiddle能帮助你理解这个概念。

.a
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;

.b
    background:red;
    width: 360px;
    height: 360px;
    border-radius: 180px;

【讨论】：

嗯？ “.a 是如何工作的？” “这是 .a 和 .b 之间的比较”我不确定你在这里想说什么。

【参考方案4】：

Demo

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

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

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

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

因为所有角都必须设置相同的半径值。

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

【讨论】：

实际上这个答案的当前版本有点远。问题只是“这个 CSS 如何创建一个圆”，而不是“border-radius 通常如何工作”，所以虽然在技术上是正确的，但它有点过分。您也可以重新格式化问题并将实际代码放入代码环境中。

【参考方案5】：

边框是任何内容的外框，如果在其上应用半径，它只会产生圆形边缘。