【Css】border-radius 还可以这么玩

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区间，两种方式都支持。
  

  兼容性

• 示例

1. 只写一个参数，则将四个角都设置为该值

<style>
    /* Css */
    #box{
        width:100px;
        height: 100px;
        border: 3px solid  #4caf50;
        border-radius: 20px;
    }
</style>
<!-- Dom 结构 -->
<div id="box"></div>

运行结果如下图

只设置一个borderRaius

2. 写两个参数

<style>
    /* Css */
    #box{
        width:100px;
        height: 100px;
        border: 3px solid  #4caf50;
        border-radius: 20px 40px;
    }
</style>
<!-- Dom 结构 -->
<div id="box"></div>

运行结果如下图：第一个参数设置左上角和右下角，第二个参数设置右上角和左下角，是一个对角关系。

写两个参数

2. 写三个参数

<style>
    /* Css */
    #box{
        width:100px;
        height: 100px;
        border: 3px solid  #4caf50;
        border-radius: 20px 40px 60px;
    }
</style>
<!-- Dom 结构 -->
<div id="box"></div>

当设置了三个参数的时候，第一个值表示左上角，第二个值表示右上角和左下角，第三个值表示右下角

写三个参数

4. 写四个参数的时候，就不解释了...

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个参数啦

是不是感觉乱七八糟的，也没什么意思？
来举个小栗子吧~
为了省事，没整理代码，将就着看个意思吧~

小栗子