这个CSS如何产生一个圆?

This is the CSS:

这是CSS:

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

How does it produce the circle below?

它如何产生下面的圆?

Suppose, if a rectangle width is 180 pixels and height is 180 pixels then it would appear like this:

假设一个矩形的宽度是180像素，高度是180像素，那么它会是这样的:

After applying border-radius 30 pixels it would appear like this:

在使用边框半径为30的像素后，会如下所示:

The rectangle is becoming smaller, that is, almost going to disappear if the radius size increases.

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

So, how does a border of 180 pixels with height/width-> 0px become a circle with a radius of 180 pixels?

那么，高度/宽度为180像素的边框-> 0px如何变成半径为180像素的圆形呢?

5 个解决方案

#1

How does a border of 180 pixels with height/width-> 0px become a circle with a radius of 180 pixels?

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

Let's reformulate that into two questions:

让我们把它重新表述为两个问题:

Where do width and height actually apply?

Let's have a look at the areas of a typical box (source):

让我们来看看一个典型的方框(来源)的区域:

The height and width apply only on content, if the correct box model is being used (no quirks mode, no old Internet Explorer).

高度和宽度只适用于内容，如果使用正确的框模型(没有怪癖模式，没有旧的Internet Explorer)。

Where does border-radius apply?

The border-radius applies on the border-edge. If there is neither padding nor border it will directly affect your content edge, which results in your third example.

边界半径适用于边界。如果没有填充或边框，则会直接影响内容边缘，这将导致第三个示例。

What does this mean for our border-radius/circle?

This means that your CSS rules result in a box that only consists of a border. Your rules state that this border should have a maximum width of 180 pixels on every side, while on the other hand it should have a maximum radius of the same size:

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

In the picture, the actual content of your element (the little black dot) is really non-existent. If you didn't apply any border-radius you would end up with the green box. The border-radius gives you the blue circle.

在图片中，元素的实际内容(小黑点)实际上是不存在的。如果你不应用任何边界半径，你会得到绿色的方块。边界半径是蓝色圆。

It gets easier to understand if you apply the border-radius only to two corners:

如果你只在两个角上使用边界半径，就更容易理解:

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

Since in your example the size and radius for all corners/borders are equal you get a circle.

因为在你的例子中，所有角/边的大小和半径是相等的，所以你得到一个圆。

Further resources

References

• W3C: CSS Backgrounds and Borders Module Level 3 (esp. 5. Rounded Corners)
• W3C: CSS背景和边框模块3级(尤指5级)。圆角)

Demonstrations

• Please open the demo below, which shows how the border-radius affects the border (think of the inner blue box as the content box, the inner black border as the padding border, the empty space as the padding and the giant red border as the, well, border). Intersections between the inner box and the red border would usually affect the content edge.
• 请打开下面的演示，它展示了边框半径是如何影响边框的(可以将内蓝框作为内容框，内黑框作为填充边框，空白空间作为填充，红色边框作为边框)。内框和红色边框之间的交叉点通常会影响内容边框。

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>

#2

Demo

演示

Let's examine the question in another way with this picture demonstration:

让我们以另一种方式来检验这个问题:

Let's see first how border radius is produced?

To produce radius it takes two sides of its border. If you set border-radius to 50 pixels then it would take 25 pixels from one side and 25 pixels from another side.

为了产生半径，它需要边界的两边。如果你将边界半径设置为50像素，那么它将会从一边占用25像素，从另一边占用25像素。

And taking 25 pixels from each side it would produce like this:

从每条边取25像素，就会得到这样的结果:

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

Now see how much can it take maximum of square to apply on one corner?

It can take up to 180 pixels from top and 180 pixels from right. Then it would produce like this:

它可以从顶部和右上角分别占用180像素。然后它会产生这样的结果:

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

And see this how does it produce if we set non-equal value of radius?

Suppose, if you apply border radius only to two corners unequally:

假设，如果你只对两个角施加边界半径不相等:

• top-right-corner to 180 pixels

  右上角为180像素

• bottom-right-corner to 100 pixels

  右下角为100像素

Then it would take

然后,它将

• top-right: 90 pixels from the top and 90 pixels from the right

  右上角:从顶部90像素，从右边90像素

• bottom-right: 50 pixels from the right and 50 pixels from the bottom

  右下角:右下角50像素，右下角50像素

Then it would produce like this

然后它会像这样产生

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

How much maximum of its border can it take of square to apply on all sides? And see how does it produce a circle?

It can take up to half of the border-size, that is, 180 pixels / 2 = 90 pixels. Then it would produce a circle like this

它可以占用边界大小的一半，即180像素/ 2 = 90像素。然后它会产生一个这样的圆

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

Why does it take only half of the square to apply on all sides?

Because all corners have to set their radius value equally.

因为所有角的半径都要相等。

Taking equal parts of its border, it produces a circle.

它在边界上取相等的部分，形成一个圆圈。

#3

Borders are the outer box of any content and if you apply radius on it, it will simply produce the circular edge.

边框是任何内容的外框，如果你对它施加半径，它只会产生圆形的边。

#4

I think that it initially creates rectangle with height and width = 180px and then make curve with given radius like 30px with each corner. So it sets border with given radius.

我想它最初会创建一个高宽= 180px的矩形，然后在每个角上绘制一个半径为30px的曲线。它用给定的半径设置边界。

#5

Both .a and .b will give the identical output.

a和。b的输出都是一样的。

Q. Why did I used width: 360px; height: 360px;?

问:我为什么用width: 360px;身高:360 px;?

A. border: 180px solid red; in .a works like border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */.

A.边框:180px纯红色;在一个像边框宽度:180px 180px 180px 180px的作品中;/*右上下*/。

Hope this fiddle helps you to understand the concept.

希望这个小提琴能帮助你理解这个概念。

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