这个CSS如何产生一个圆？

206

这是CSS：

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

它如何产生下面的圆圈？

在此处输入图片说明

假设，如果矩形的宽度为180像素，高度为180像素，那么它将显示为：

在此处输入图片说明

应用边界半径30像素后，将显示如下：

在此处输入图片说明

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

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

html  css  css-shapes 
— 纳文·劳尼雅（Navin Rauniyar）
source
14
这是一个0x0对象，其周围有一个180像素的边框，带有圆角。因此，圆角是一个圆的象限。
— 卡兹（Kaz）
我脑子里有一个愚蠢的问题，为什么你要用circle边框做？？？我们可以轻松地进行制造circle，width以及height为什么这样做border
— The Mechanic Mechanic
7
仅供参考，用于制作圆形，请使用<code> border-radius：50％</ code>-在正确设置布局时可以更轻松地仅调整宽度/高度。
— 大卫·吉尔伯森
是的女士们，这是一门数学
— Medet Tleukabiluly

Answers:

372

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

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

在哪里width和height实际应用？

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

W3C：典型盒子的区域

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

仅在两个角上应用边框

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

更多资源

参考资料

示威

  • 请打开下面的演示，其中演示border-radius了边框的影响方式（以内部蓝色框为内容框，内部黑色框为填充框，空白为填充框，以红色大框为边框，边境）。内框和红色边框之间的交点通常会影响内容边缘。

显示代码段

— 泽塔
source
我认为css3-background不会对css3-box进行任何引用（css3-box正在等待重写）。
— BoltClock
@BoltClock：我认为css3-box可以定义edges。简介中仅引用了css2.1-box（非规范性），并且还提供了给定的图像，因此，实际上并不需要了解css3-box border-radius（重写css3-会带来什么变化）框？）。
— Zeta 2013年
@Zeta我脑子里有一个愚蠢的问题，为什么circle要用边框做？？？我们可以轻松地进行制造circle，width以及height为什么这样做border
— The Mechanic Mechanic
1
@Sarfaraz：看一下OP的问题：“那么，180px的边框如何height/width-> 0px变成半径为180px的圆？” 。我只是回答了这个问题。还有其他创建圆的方法，但是OP只对这种特定方法的工作方式感兴趣。
— Zeta 2013年
@Zeta：我不确定确切会更改什么，但是考虑到WD在6年内没有更新，我怀疑其中很多会被更改。我确实知道第11节（overflow属性族）现在位于其自己的模块css-overflow-3中，但尚未在ED中得到反映。您会在ED中看到很多问题，但我想这并不是一个详尽的清单：dev.w3.org/csswg/css3-box
— BoltClock
94

演示版

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

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

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

在此处输入图片说明

为什么只需要正方形的一半即可在所有面上应用？

因为所有角必须均等地设置其半径值。

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

— 博杰德拉·拉尼雅（Bhojendra Rauniyar）
source
7
实际上，此答案的当前版本将其带到了很远。问题仅是“此CSS如何创建一个圆”，而不是“边界半径通常如何工作”，因此从技术上讲，它有点很多。您也可以重新格式化问题，然后将实际代码放入代码环境中。
— Zeta 2013年
3

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

— rahul_pratap
source
3

我认为它最初会使用创建矩形，height and width = 180px然后像30px每个角一样制作具有给定半径的曲线。因此它border与给定radius。

— 桑克斯
source
1

两者.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;
}
— 拉杰德·乔希
source
9
?？“ .a如何工作？” “这是.a和.b之间的比较”，我不确定您要在这里说什么。
— BoltClock
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.