border-radius是css3新增的属性
单值法:
例:border-radius:50px
设置盒子四个角的圆角大小
双值法:
例:border-radius:50px 100px
50px代表左上角、右下角,100px代表右上角、左下角
例:border-radius: 100px / 50px;
表示4个角的top或bottom值都是100px left或right的值都是50px
三值法:
例:border-radius:50px 80px 100px
50px代表左上角,80px代表右上角和左下角,100px代表右下角
四值法:
例:border-radius:50px 60px 70px 80px;
分别代表左上、右上、右下、左下四个角,顺时针排列
四个值分开设置:
border-top-left-radius: 10px 20px;
border-top-right-radius: 40px 40px;
border-bottom-right-radius: 70px 60px;
border-bottom-left-radius: 100px 100px;
每个方向的角有两个取值,拿第一行左上方向来说:
10px表示左上角空白位置top方向的宽度,20px表示左上角空白位置left方向的宽度