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% 0 0 100%/50% 0 0 50%;
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;
}