border-radius 表示边框圆角，经常使用，一般就是给盒子设置个圆角或是写个圆形，今天让我们来深入了解一下radius~
先看一个图：
不正经的形状
看到这么一个图形，你的第一反应是不是用canvas或是svg来实现？
那就想复杂啦~~来，让我们看看border-radius是如何帮我们的
语法
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]
默认值：所有元素
适用于：所有元素
继承性：无
动画性：每个独立属性
计算值：每个独立属性取值
<length>:用长度值设置对象的圆角半径长度，不允许负值
<percentage>:用百分比设置对象的圆角半径长度，不允许负值说明
设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数-
兼容性
Firefox从13.0开始移除对-moz-的支持，仅支持标准的border-radius写法，在4.0-12.0区间，两种方式都支持。
兼容性 示例
- 只写一个参数，则将四个角都设置为该值
<style>
/* Css */
#box{
width:100px;
height: 100px;
border: 3px solid #4caf50;
border-radius: 20px;
}
</style>
<!-- Dom 结构 -->
<div id="box"></div>
运行结果如下图
只设置一个borderRaius
- 写两个参数
<style>
/* Css */
#box{
width:100px;
height: 100px;
border: 3px solid #4caf50;
border-radius: 20px 40px;
}
</style>
<!-- Dom 结构 -->
<div id="box"></div>
运行结果如下图：第一个参数设置左上角和右下角，第二个参数设置右上角和左下角，是一个对角关系。
写两个参数
- 写三个参数
<style>
/* Css */
#box{
width:100px;
height: 100px;
border: 3px solid #4caf50;
border-radius: 20px 40px 60px;
}
</style>
<!-- Dom 结构 -->
<div id="box"></div>
当设置了三个参数的时候，第一个值表示左上角，第二个值表示右上角和左下角，第三个值表示右下角
写三个参数
- 写四个参数的时候，就不解释了...
5.设置8个参数的时候，就好玩啦~~~
<style>
/* Css */
#box{
width:100px;
height: 100px;
border: 3px solid #4caf50;
border-radius: 30px 10px 60px 20px/70px 30px 50px 10px;
}
</style>
<!-- Dom 结构 -->
<div id="box"></div>
8个参数啦
是不是感觉乱七八糟的，也没什么意思？
来举个小栗子吧~
为了省事，没整理代码，将就着看个意思吧~
小栗子
