这个CSS如何产生一个圆？ [英] How does this CSS produce a circle?

问题描述

这是CSS：

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

如何生成下面的圆？

>

假设，如果矩形宽度为180像素，高度为180像素，则它将显示如下：

应用border-radius 30像素后，会出现如下：

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

height / width->

解决方案

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

分成两个问题：

其中 width 和 height

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

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

由于在您的示例中，所有边角/边框的大小和半径相等， 。

其他资源

参考资料

• W3C： CSS背景和边框模块3级（特别是 5.圆角< a>）

示范

• 请打开下面的演示，它显示 border-radius 如何影响边框（认为内部蓝色框为内容框，内部黑色边框为填充边框，空的空间作为填充和巨大的红色边框作为，井，边界）。内框和红色边框之间的交叉点通常会影响内容边缘。

  #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％;高度：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>总计< / label>< / td> < td>< input id =totalvalue =0type =rangemin =0max =100step =1/>< / td> < td>< input readonly id =totalTextvalue =0type =text/>< / td> < / tr> < tr> < td>< label for =TopLeft>左上< / label>< / td> < td>< input id =TopLeftvalue =0type =rangemin =0max =100step =1/>< / td> < td>< input readonly id =TopLeftTextvalue =0type =text/>< / td> < / tr> < tr> < td>< label for =TopRight>右上方< / label>< / td> < td>< input id =TopRightvalue =0type =rangemin =0max =100step =1/>< / td> < td>< input readonly id =TopRightTextvalue =0type =text/>< / td> < / tr> < tr> < td>< label for =BottomRight>右下方< / label>< / td> < td>< input id =BottomRightvalue =0type =rangemin =0max =100step =1/>< / td> < td>< input readonly id =BottomRightTextvalue =0type =text/>< / td> < / tr> < tr> < td>< label for =BottomLeft>左下角< / label>< / td> < td>< input id =BottomLeftvalue =0type =rangemin =0max =100step =1/>< / td> < td>< input readonly id =BottomLeftTextvalue =0type =text/>< / td> < / tr> < caption>< code" border-radius< / code>值。 < / caption>< / table>< p>此演示使用一个包含< code> width / height< / code> of 32px，a< code> padding< / code> （32像素）和< code> border< / code>的100像素。< / p>  

This is the 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:

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

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?

解决方案

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

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).

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:

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)

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>

这篇关于这个CSS如何产生一个圆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！