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

border-radius 表示边框圆角，经常使用，一般就是给盒子设置个圆角或是写个圆形，今天让我们来深入了解一下radius~
先看一个图：

不正经的形状

看到这么一个图形，你的第一反应是不是用canvas或是svg来实现？
那就想复杂啦~~ _{来，让我们看看border-radius是如何帮我们的}

• 语法
  border-radius:[|]{1,4}[/[|]{1,4}]
  默认值：所有元素
  适用于：所有元素
  继承性：无
  动画性：每个独立属性
  计算值：每个独立属性

• 取值
  :用长度值设置对象的圆角半径长度，不允许负值
  :用百分比设置对象的圆角半径长度，不允许负值

• 说明
  设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

• 兼容性
  Firefox从13.0开始移除对-moz-的支持，仅支持标准的border-radius写法，在4.0-12.0区间，两种方式都支持。
  

  

  兼容性

• 示例

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

运行结果如下图

只设置一个borderRaius

2. 写两个参数

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

写两个参数

2. 写三个参数

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

写三个参数

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

5.设置8个参数的时候，就好玩啦~~~

8个参数啦

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

小栗子