borderradius(borderradius什么意思)
border-radius怎么用
border-radius:5px;
设置圆角全部为5像素
border-radius: 5px 5px 3px 3px;
border-radius: [左上] [右上] [右下] [左下];
border-radius的值怎么定义
border-radius的含义是：圆角。
border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。
border-radius的理解
border-radius: 30px; // 边框的上右下左，都是以30px为半径绘制的原型，与div的宽高无关。
border-radius: 30px图片表示：
使用%来表示圆角值的时候，以对象的宽高为百分比进行折算；
如果对象的宽和高是一样的，那判断方法与第一点一致，只不过想象的时候，需要将宽高乘以百分数换算一下；
如果宽高不一致，那产生的效果，其实就是以对象的宽高乘以百分数后得到的值r1和r2，作为两条半径绘制出来的椭圆产生的弧度。
如何将一个宽高不一致的图形，用border-radius绘制成一个圆形？
border-radius 可以接收哪些值呢?
border-radius 给元素添加圆角的边框 , 是一个最多可指定四个 border -*- radius 属性的复合属性
border-radius: 1-4 length | % / 1-4 length | %; , 最多可接收8个值.
border-radius: 2px; 或 border-radius: 5%; 四个角 是统一的圆角.
或
第一个值: 左上角 和 右下角 . 第二值: 右上角 和 左下角.
或
第一个值: 左上角 . 第二个值: 右上角 和 左下角 . 第三个值: 右下角
或
第一个值: 左上角 . 第二个值: 右上角 . 第三个值: 右下角 . 第四个值: 左下角.
等价于
深入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. 圆角是会互相影响的，也是按比例来占有半径
border-radius属性是什么？
复合属性。
border-radius属性是一个最多可指定四个border，adius属性的复合属性。
提示：?这个属性允许你为元素添加圆角边框！
语法：
border-radius: 1-4 length|% / 1-4 length|%。
注意：?每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
例子：
border-radius:2em。
is equivalent to。
border-top-left-radius:2em。
border-top-right-radius:2em。
border-bottom-right-radius:2em。
border-bottom-left-radius:2em。