本文目录
border-radius属性是什么
borderradius是CSS3设置圆角的一个属性，其属性值得单位可以使用：em、px、百分比等等。设置原则：一个值，则用其为半径构建圆形，这个圆与边框的交集形成圆角效果。两个值，则用两个值分别为半长轴、半短轴构建椭圆，这个圆与边框的交集形成圆角效果。
圆角是用一段与角的两边相切的圆弧替换原来的角，圆角的大小用圆弧的半径表示。在网页设计越来越精美的今天，圆角的应用已经越来越广泛。borderradius的用途：为边框设置圆角，若无边框，则会作用到背景上。
圆是一种几何图形。根据定义，通常用圆规来画圆。同圆内圆的直径、半径长度永远相同，圆有无数条半径和无数条直径。当多边形的边数越多时，其形状、周长、面积就都越接近于圆。所以，世界上没有真正的圆，圆实际上只是概念性的图形。
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属性
其实通过一张示意图来理解的话就很容易了，那么我先来画一张示意图。
by三人行慕课
我们可以理解成是在角的位置放了一个圆形，而我们设置的参数就是圆形的半径，/前和/后分别是水品半径和垂直半径（横向的半径和纵向的半径）。
设置参数的顺序分别是左上、右上、右下、左下，在这里简称为1、2、3、4
我们设置这样的参数 50px 50px 50px 50px/25px 25px 25px 25px;（相当于50px/25px）
也就是1 2 3 4的水平半径都是50像素，垂直半径都是25像素，就会得到这样的图形：
by三人行慕课
我们来分析一下就是
by三人行慕课
这样看起来就显而易见，横向半径是50px，纵向半径是25px。
