HTML5学习_day13(3)--border-radius属性(圆角边框)

border-radius属性




用法:

border-radius:像素;


复合写法:

1.

左上角 右上角 右下角 左下角

border-radius:20px;



2.

左上角=右下角=20px;

右上角=左下角=40px;

border-radius:20px 40px;

3.

左上20 右上30 右下40

border-radius:20px 30px 40px;

4.

30表示水平方向的半径 40表示垂直方向的半径

border-radius: 30px/40px;


5.

下面顺时针方向设置水平半径和垂直半径 

border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;



单独写法:

左上角:border-top-left-radius: ;

右上角:border-top-right-radius: ;

左下角:border-bottom-left-radius: ;

右下角:border-bottom-right-radius: ;



你可能感兴趣的:(HTML5学习_day13(3)--border-radius属性(圆角边框))