border-radius:50%,borderradius10px

border-radius:50%和100%的区别

在学习css的过程中，我们一般想要得到一个圆的话，那么border-radius这个属性的必不可少的，有时候我们把这个值设置成了50%，OK正常，有时候又设置成100%，也能work well ，那这两个之间的区别到底是什么呢

这是一个 150px x 150px 大小的方形，将它的四个角的半径都设置成 50%。根据 W3C border-radius 的规范 定义，如果 border-radius 的值是百分比的话，就是相对于 border box 的宽度和高度的百分比。在我们的例子中，盒子的宽高都是 150px，所以 50% 对应的就是 75px。

但是有时候我看到有的人会用 border-radius: 100%; 实现圆形的效果，在前段时间的一个项目中我想都没想就这么使用了，看起来和 50% 并没有什么区别。是什么原因呢？

在 Lea Verou 的演讲 The Humble Border Radius 中，她说到 W3C 对于 重合曲线 有这样的规范：如果两个相邻的角的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算保证它们不会重合。

如果左上角的圆角半径被设置成了100%，那么圆角就会从这个方形左下角跨到右上角，相当于把圆角半径设置成为150px（也就是方形的大小）。如果同时把右上角的圆角半径也设置成为100%，则两个相邻圆角合起来就有200%。这种情况自然是不允许出现的，所以浏览器就会重新就算，匀出空间给右边的圆角，同时缩放两个圆角的半径直到它们可以刚好符合这个方形，所以半径就变成了50%。

同样的，浏览器会对其他的圆角应用相同的计算，计算的结果是每个圆角的半径变成了50%，所以我们看到了一个原型。即使将border-radius设置为150px，浏览器还是会按照75px画圆角，75px是浏览器所允许的这个方形能够拥有的最大的圆角半径。

如果所有圆角的半径都被设置成了100%，浏览器会根据图形的实际情况做一些计算，保证圆角能够刚好适应图形。不过我不确定将所有图形的 border-radius 设置成100%对性能会不会有影响。

安卓中border-radius:50%圆角展示不圆问题

做移动端开发时为了做适配，通常采用rem作为单位，下面来写一个圆角

在安卓中的展示效果如上图所示，第二个圆明显不是一个规范的圆型，原因是0.16rem换算成px是一个带小数点的值，安卓对小于1px的展示做了处理，从而导致圆角不圆，在ios下就没有这个问题。

解决方案：

深入border-radius

????????在掘金上看到一个话题，如何用border-radius画一个半圆，初看到这个题目觉得应该很简单，于是开始动手写，结果发现还是有很多可以研究的。

咱们来回忆一下我们经常用到的：画一个圆形：

border-radius其实每个角有两个值分别控制其圆角，一个是水平圆角半径，另一个是垂直圆角半径。

border-radius 其实是四个角的缩写，分别是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius；而这四个圆角，控制其形状的又分为水平和垂直两个值；所以平时我们写border-radius: 50%; 实际上是?

border-radius: 50% 50% 50% 50% /?50% 50% 50% 50%;?

分别代表：左上水平圆角半径 右上.. 右下.. 左下.. /?左上垂直圆角半径 右上垂直圆角半径 右下.. 左下..

（1） 一个圆角，宽高相同

上面这两张截图例子很简单，就是当控制一个圆角时，会根据它设置的圆角半径大小来画圆，半径越大，画的圆就越大，你瞅瞅图1.1半径小，实际上会形成的圆就是小的，到图1.2，半径变大了，就得到了一个四分之一的圆，就可以看到如果实际形成圆，这个圆就会明显比图1.1大。

【 重点小tip 】而如图1.3所示：当圆角半径超设置的宽高时，最大的水平 和 垂直圆角半径还是分别等于 宽度 和 高度的大小，不会再变大了。

（2）一个圆角，宽高不同

其实图2.1~图2.3规律跟上面图1.1~图1.3一个圆角，宽高相同的规律一致。那么此时图2.4就不一样， 重点来了！

图2.4中，当水平圆角半径设置为宽度的2倍，而垂直圆角半径跟高度一致时，出现的效果是水平圆角半径与宽度一致（这个就是上面图1.3时说的不会超过实际的宽度，超过时就会等于宽度），这是合理；但是此时垂直圆角半径居然变成了高度的1/2。

在图2.4例子中，width:height==1:2，而左上角圆角的水平圆角半径:垂直圆角半径=1:1；那么此时可以看出水平圆角半径和width是1:1，而垂直圆角半径跟height是1:2，从例子来看，垂直半径就是height的一半了。此时就出现了今日第二小tips：

【 重点小tip 】等比例特征，根据width和height比例，来推断border-radius的水平和垂直比例，因为实际width:height是1：2，而水平半径：垂直半径=1：1，所以垂直半径就只能跟水平一样都是width，如果此时想要实现垂直半径等于高度，那么就需要等比例，即水平半径：垂直半径=width:height = 1:2，即

border-top-left-radius: 200px 400px;? 或

border-top-left-radius: 100px 200px; 相当于 border-top-left-radius: 100% 100%;（这比例是根据width和height乘于对应的比例）

（1）两个圆角，宽高相同

上图的例子说明一个问题：两个角是会互相影响的，第二个例子中，左上角圆角和左下角圆角分别都是200px;(height是200px)，但是最后是按照它们的比例：1:1来分别分100px给它们；而此时因为垂直和水平半径比例是1：1，此时垂直半径是100px；水平半径跟着也缩减为100px；

同理，第三个例子中左上角和左下角的比例是1：2，那么从例子看它们的圆角半径（包括水平和垂直半径）也跟着成比例。

那么这一小节又可以总结一个小tip啦~

【 重要小tip 】圆角之间会互相影响，根据它们在垂直还是水平分别按照比例得到是height还是width的百分比来画圆角。而相应的，其他的就会根据上面的两个小tips再继续形成最终的圆角~

那么现在根据上面的知识应该能画出我们文章最初提出来的问题，如何画个半圆。控制wdith:height=1:2;而border-radius中水平半径是width;垂直半径是width;就能画出一个半圆了；即水平和垂直半径的比例是1:1;

总结：

1. 设置border-radius时，半径不会超过实际元素设置的width和height

2. 水平和垂直半径是按比例的

3. 圆角是会互相影响的，也是按比例来占有半径