css3的border-radius

border语法

border-radius支持是四个角，总共八个值（水平+垂直）的设置：

border-radius:1px 2px 3px 4px / 5px 6px 7px 8px;

表示

border-top-left-radius:1px 5px;
border-top-right-radius:2px 6px;
border-bottom-right-radius:3px 7px;
border-bottom-left-radius:4px 8px;

表示从左上角开始，顺时针旋转依次设置每个角的水平值和垂直值

有以下几种简写方式

border-radius:50%;
/*等同于*/
border-radius:50% 50% 50% 50%/50% 50% 50% 50%;

border-radius:50% 20%;
/*等同于*/
border-radius:50% 20% 50% 20%;

border-radius:50% 20% 40%;
/*等同于*/
border-radius:50% 20% 40% 20%;

举几个例子

1、制作一个椭圆

.circle{
    width:150px;
    height:100px;
    border-radius:50%;
    border:1px solid red;
}

2、半椭圆

.circle{
    width:150px;
    height:100px;
    border-radius:50% 50% 0 0/100% 100% 0 0;
    border:1px solid red;
}

.circle{
    width:150px;
    height:100px;
    border-radius:100% 100% 0 0/50% 50% 0 0;
    border:1px solid red;
}

3、一片树叶

.circle{
    width:150px;
    height:100px;
    border-radius:100% 0;
    border:1px solid red;
}

4、普通的图形

.circle{
    width:150px;
    height:100px;
    border-radius:10px 20px 30px 40px/20px 30px 40px 50px;
    border:1px solid red;
}