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

这是CSS：

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

它如何产生下面的圆圈？

假设，如果一个矩形的宽度是180像素，高度是180像素，那么它会看起来像这样：

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

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

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

Answer 1

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

让我们把它重新分成两个问题：

width和height在哪里实际适用？

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

height和width只适用于内容，如果使用正确的盒子模型（没有怪癖模式，没有旧的Internet Explorer）。

border-radius在哪里适用？

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

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

这意味着您的CSS规则将导致只包含边框的框。 您的规则规定，此边框的每边最大宽度应为180像素，而另一方面则应该具有相同大小的最大半径：

在图片中，元素的实际内容 （小黑点）实际上是不存在的。 如果你没有使用任何border-radius你会以绿色方框结束。 border-radius给你蓝色的圆圈。

如果仅将border-radius 应用于两个angular落，则会更容易理解：

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

由于在你的例子中，所有的angular落/边界的大小和半径是相等的，你会得到一个圆圈。

更多的资源

参考

• W3C： CSS背景和边框模块3级 （特别是5个圆angular ）

示威

• 请打开下面的演示，其中显示了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; } 

现在看看在一个angular落申请最多可以占多less平方米？

它可以从顶部到180像素，从右边到180像素。 那么它会产生这样的：

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

如果我们设置半径不等的值，看看它是如何产生的？

假设，如果只将边界半径不平等地应用于两个angular落：

• 右上angular为180像素

• 右下angular为100像素

然后，它会采取

• 右上angular：顶部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; } 

为什么只有一半的广场适用于所有方面？

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

以相等的边界，它会产生一个圆圈。

Answer 3

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

Answer 4

我认为它最初创build的height and width = 180px矩形，然后用给定的半径为30px曲线与每个angular落。 所以它设定了给定radius border 。

Answer 5

.a和.b将给出相同的输出。

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

A. border: 180px solid red; 在.a像border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */ 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; }