border-radius属性(详解)

border-radius属性

通常我在运用这个特点的时分，一般都是用在给div或者button加上一点圆角弧度，显得好看一点，或者用来画一个圆形div。用的稍微高级一点的，也便是用来画了一个右半圆来做为侧边栏的展开/收缩按钮。
一、border-radius运用
border-radius的数值有三种表明方法：px、%、em，关于border-radius的值的设置，咱们常用的有三种写法：
（1）仅设置一个值
榜首种方法，应该是咱们最常用的一种状况了，常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置一致的圆角弧度，例如：
1#test1{
2border:3pxsolidred;
3height:100px;
4width:200px;
5border-radius:30px;6}
1#test2{
2border:3pxsolidred;
3height:100px;
4width:100px;
5border-radius:53px;6}
（2）设置四个方向的值
border-radius特点其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个特点的简写形式，因此，border-radius:30px;，其实等价于border-radius:30px30px30px30px;（ps：与padding和margin一样，各个数字之间用空格隔开）。
这里要注意四个数值的书写次序，不同于padding和margin的“上、右、下、左”的次序，border-radius选用的是左上角、右上角、右下角、左下角的次序，如下图所示：
（3）省掉部分值
与padding和margin一样，border-radius同样能够省掉部分值，省掉时同样是选用对角线相等的准则，例如：
1#test3{
2border:3pxsolidred;
3height:100px;
4width:200px;
5border-radius:50px0px;
6}
二、border-radius数值设置及显现作用的理解
（1）运用px表明数值的状况
在运用px来表明圆角值的时分，圆角的弧度一般都是一个圆形的部分弧形，具体出现的显现作用我是按如下方法与预估和理解的：
假定一个长200px，高150px的div目标，设置它的border-radius的值为30px，那么实际出现的圆角，其实便是一个以30px为半径的圆顶格放置在四个边角后所出现的弧度，语言表达的或许不够透彻，看下面的比如应该能够理解。
1#test4{
2height:150px;
3width:200px;
4border-radius:30px;
5background-color:cornflowerblue;
6}
7#circle{
8width:60px;
9height:60px;
10border-radius:30px;
11background-color:chartreuse;
12}
（2）运用%表明数值的状况
运用%来表明圆角值的时分，如果目标的宽和高是一样的，那判别方法与榜首点一致，只不过想象的时分，需求将宽高乘以百分数换算一下；
如果宽高不一致，那发生的作用，其实便是以目标的宽高乘以百分数后得到的值r1和r2，作为两条半径制作出来的椭圆发生的弧度。
1#test5{
2height:100px;
3width:200px;
4border-radius:50%;
5background-color:cornflowerblue;
6}
（3）需求注意的状况
在设置目标为圆形的时分，如果运用了border、padding等状况时，目标的实际显现宽高现已不再是设置的width和height的数值，如果border-radius设置的值仍为原本的width和height的一半，或许达不到预期的真实的圆形的作用。
如下面这个比如，给div加了10px的边框，可是border-radius仍是以100px的一半来设置的，显现出来的作用显然就不是一个真实的圆形。
1#test6{
2height:100px;
3width:100px;
4border-radius:50px;
5border:10pxsolid#CCCCCC;
6background-color:cornflowerblue;
7}
能够经过设置百分比50%的方式来处理这一状况，或者计算一下实际的高度再来设置border-radius的数值。上面这个比如，div实际的宽高应该是100+10*2=120px，所以border-radius应该设置为60px。
1#test7{
2height:100px;
3width:100px;
4border-radius:60px;
5border:10pxsolid#CCCCCC;
6background-color:cornflowerblue;
7}
三、border-radius完好结构形式（扩展了解一下，个人感觉好像用不到）
在W3C上查border-radius特点时，会发现上面描述的语法是这样的：
border-radius:1-4length|%/1-4length|%;
这是什么意思呢，我也看不懂，后来百度了解到，这是border-radius的完好写法，咱们平常的写法其实都是简写，平常咱们写的border-radius:50px，其实完好的写法应该是：
border-radius:50px50px50px50px/50px50px50px50px;
“/”前的四个数值表明圆角的水平半径，后面四个值表明圆角的笔直半径，什么是水平半径和笔直半径呢，见下图
依据水平半径和笔直半径的值，能够构成一个椭圆或者圆形，然后再依据这个去给元素设置圆角的弧度。使用border-radius的完好特点表达方式，能够设置一些特性的圆角样式

border-radius属性详解

border-radius是CSS3设置圆角的一个特点，其特点值得单位能够运用：em、px、百分比等等。可是，border-radius特点值得参数方式有好多种，那么具体都代表什么意思呢？下面以实践比如分析一下：
首先是最常见的一种方式，一个值：border-radius:值；
border-radius:10px;
这段代码代表一起将元素的每个圆角的”水平半径”和”笔直半径”都设置为10px。
border-radius能够一起设置1到4个值，（类似于margin与padding的值得设定）。假如设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针次序）。
代码：
border-radius:10px20px0px30px;
假如设置两个值，表明左上角和右下角运用第一个值，右上角和左下角运用第二个值。
代码：
border-radius:20px0px;
假如设置三个值，表明左上角运用第一个值，右上角和左下角运用第二个值，右下角运用第三个值。
代码：
border-radius:10px0px50px;
border-radius还能够用斜杠二组值。这时，第一组值表明水平半径，第二组值表明笔直半径。每组值也能够一起设置1到4个值，使用规则是依次对应左上角、右上角、右下角、左下角（顺时针次序）。
代码：
border-radius:50px/30px;
代码：
border-radius:50px30px20px10px/20px30px20px30px;
除了能够一起设置四个圆角以外，还能够独自对每个角进行设置。对应四个角，CSS3提供四个独自的特点：
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
这四个特点都能够一起设置1到2个值。假如设置1个值，表明水平半径与笔直半径持平。假如设置2个值，第一个值表明水平半径，第二个值表明笔直半径。
代码：
border-top-right-radius:50px;
border-top-right-radius:50px20px;