css3 超好用的border

一.设置圆角 border-radius

    

      1 * 设置一个值.指定x,y都是50

设置圆角的顺序:从左上角开始,顺时针

设置一个值,4个角都使用相同的角度*/

.box1{border-radius: 50px;}

      2*设置两个值

对角关系,左上角和右下角 50px

右上角和左下角 100;*/

 .box2{border-radius:50px 100px;}

   3*设置三个值时

第一个左上角

第二个对角线 右上角和左下角

第三个右下角*/

.box3{border-radius:50px 100px 70px;}

      4*设置四个值.顺时针顺序

.box4{border-radius: 50px 70px 80px 100px;}

      5*x/y 设置x方向的偏移 y方向的偏移

.box5{border-radius: 50px/100px;}

 x1 x2 x3 x4/y1 y2 y3 y4

6*之前的是x方向的偏移,/之后的都是y方向的偏移,还是顺时针方向

.box6{border-radius:50px 60px 80px 90px/100px 50px 100px 50px;}

7*只设置一个角

.box7{border-top-left-radius: 50px 100px;

border-top-right-radius: ;

border-bottom-left-radius:;

border-bottom-right-radius:50px 100px;

}

                                                                                                                      8*可以把数值改成百分比

x偏移 宽*百分比

y偏移 高*百分比*/

.box8{border-radius: 50%}

.box9{ 

/*border-top-left-radius: 100px 100px;

border-top-right-radius: 100px 100px;*/

border-radius: 100px 100px 0 0/100px 100px 0 0;

}