很多人拿border-radius就是做点圆角效果，或者弄一个圆形的头像(说的就是以前的自己^_^)，但，这些都是没有真正发掘border-radius的价值的！
先看看一些别人的效果↓
看了后突然发现自己以前对border-radius的了解好无知哦@_@
知耻而后勇！那我们就开始学起来！
一、border-radius的基础语法
border-radius: 1-4 length|% / 1-4 length|%;
以前半径值是length，也就是固定像素值，现在在新的标准里面，可以设置百分比的值了。
比如：border-radius:50%;
或者：border-radius:2em;
二、border-radius的百分比值
如果以前我们要做一个正圆，元素具有border和padding，则圆角半径是需要考虑这些元素占位的值的。.box{
width:100px;
height:100px;
border:20pxsolid#F60;
}
.br1{
border-radius:70px;}
.br2{
border-radius:50px;}
但是如果我们使用百分比的值则不用再计算了。.br3{
border-radius:50%;}
感觉棒棒的！
三、border-radius的水平、垂直半径
1、四方都是1/4圆的圆角半径，说明水平和垂直的半径是一样的。.br4{
border-radius:10px20px30px40px;}
只要水平和垂直的半径是相等的，产生的就是四分之一圆。
而且，圆角具有外半径和内半径之分。
当radius半径值小于border的值时，没有内半径，所以内角是直角，当radius半径值大于border的值时，才有内半径，也才有内圆角。内半径的值等于外半径的值减去border的值。
如果我们需要的是标准的椭圆呢？.box1{
width:200px;
height:100px;
border:20pxsolid#F60;}
.br5{
border-radius:50%;
}
当宽高不一样的时候，半径为50%，则是标准的椭圆。
如果我们设置一个非常大的半径值，则成了橡胶跑道。.br6{
border-radius:500px;}
这是为什么呢？
2、当水平、垂直半径不一样的时候.br61{
border-radius:100px50px60px40px/50px100px30px20px;}
此时的语法是border-radius:水平/垂直;
水平、垂直的四个值的方位是左上、右上、右下、左下顺时针方向。
此时水平垂直的值之间是“/”隔开的。
四、边框宽度不一致.border1{
border-width:20px0px30px;}
.br7{
border-radius:40px;}
边框宽度不一致的时候，圆角是从宽的边向窄的边转动过来的。其实可以理解为外半径是一样的，但是内半径在不断地变大。
五、边框颜色不一致.border2{
border-color:#FC5505#0FA81B#0ECDE2#F5388D;}
.br8{
border-radius:40px;}
当边框的宽度发生变化时：.border2{
border-color:#FC5505#0FA81B#0ECDE2#F5388D;}
.border3{
border-width:20px40px20px10px;}
.br8{
border-radius:40px;}
可以发现，两个颜色之间的间隔线条的角度与边框的宽度的比值是一样的。比如两条相邻的边框的宽度在这里都是1:2或者2:1，所以90度被分为了三份，每份30度，两倍宽的边框的夹角为60度，一倍宽度的边框的夹角是30度。
六、某个角有圆角.br9{
border-top-right-radius:200px100px;
}
可以单独为某个角设置圆角，此时的语法结构是：border-垂直-水平-radius:水平 垂直;
好蹊跷的语法结构呀,属性名是垂直水平，属性值是水平垂直，能不能统一一点？
还有，此处的两个值中间是空格，不是“/”呀！
七、绘制一个弯弯的月亮.moon{
width:100px;
height:100px;
border-right:20pxsolid#F60;
border-radius:50%;}
八、绘制一条小鱼.fish{
width:34px;
height:34px;
position:relative;
background-color:#2c2c2c;
border-radius:80%0;
transform:rotate(45deg);
margin-left:50px;}
.fish:before{
content:"";
position:absolute;
border-left:10pxsolid#2c2c2c;
border-top:10pxsolidtransparent;
border-bottom:10pxsolidtransparent;
top:24px;
left:-5px;
transform:rotate(-45deg);}
.fish:after{
position:absolute;
content:"";
width:5px;
height:5px;
background-color:#fff;
border-radius:50%;
top:6px;
right:7px;
box-shadow:5px-20px1px1px#2c2c2c,-1px-35px2px2px#2c2c2c;}
九、绘制一副墨镜.glass{
font-size:27px;
width:0.4em;
height:0.1em;
position:relative;
border-top:0.05emsolid#2c2c2c;
border-radius:50%50%00/100%100%00;
box-shadow:-0.2em-0.3em0-0.07em#2c2c2c,0-0.3em0-0.07em#2c2c2c,0.2em-0.3em0-0.07em#2c2c2c;
margin:0050px50px;
}
.glass:before{
position:absolute;
content:"";
width:1em;
height:1.1em;
background-color:#2c2c2c;
border-top-left-radius:100%75%;
border-top-right-radius:142%100%;
border-bottom-right-radius:91%197%;
border-bottom-left-radius:200%200%;
top:-0.4em;
left:0.37em;
box-shadow:0.55em00-0.47em#2c2c2c;}
.glass:after{
position:absolute;
content:"";
width:1em;
height:1.1em;
background-color:#2c2c2c;
border-top-right-radius:100%75%;
border-top-left-radius:142%100%;
border-bottom-left-radius:91%197%;
border-bottom-right-radius:200%200%;
top:-0.4em;
left:-1em;
box-shadow:-0.55em00-0.47em#2c2c2c;}
点击查看具体案例
其实，这些绘制出来的图形主要利用了:before和:after伪元素，relative和absolute定位，以及box-shadow和border-radius以及transform变形等功能。
关键还是脑洞能开多大的问题！
ps：最近每天坐公交上下班要四个小时，早晚闻着公交车的尾气、空调味，最可恶的是还有偶然冒出的屁味儿，真的很恶心。还有一天到晚在密不透风的教室里坐一天，我的嗓子已经被熏得肿痛难耐，关键是这还没有开始上课，肿么办！
