CSS3 border-radius浅析

关于border-radius，平时最常用的就是
1、border-radius:5px，实现圆角按钮；
2、border-radius:50%，实现圆形。

可这。。远远不足以展示这个属性的威力，今天我们来发掘一些新玩法~
首先，看它的标准语法：

border-radius: 1-4 length|% / 1-4 length|%;

1、属性值最多有8个，值可以是固定值(px/em/rem)或百分比(%)；
2、当有8个值时，用「 / 」分隔，斜杠前表示水平半径，斜杠后表示垂直半径；
3、没有「 / 」时，水平和垂直半径相等；
4、属性值从左上角开始顺时针设置，若有省略的一个或两个值，省略值与对角线上值一致。

啥意思呢，是挺不好懂的；如图，由两个半径形成的圆与边框的交集产生了圆角的效果，同理四个角都是如此，最多就有了8个半径值。

椭椭的圆

举个栗子：

border-radius: 2em 1em 4em / 0.5em 3em;
/* 等价于 */
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

这些值任意发挥，其实可以实现很多形状~

.div1{
    width: 200px;
    height: 200px;
    border: 1px solid #99CC33;
    border-radius: 50% 50% 0% 0%;
}
.div2{
    width: 200px;
    height: 200px;
    border: 1px solid #99CC33;
    border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
}
.div3{
    width: 200px;
    height: 200px;
    border: 1px solid #99CC33;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

还有个地址，可以在线演示，查看不同数值会生成什么形状，https://9elements.github.io/fancy-border-radius/
其实它与border配合，可以发挥的空间就更大了，有兴趣大家可以自己设置~