详解border-radius属性

圆角边框

完整形式8参数

border-radius : 右上角的水平 左上角的水平 左下角的水平 右下角的水平 / 右上角的垂直 左上角的垂直 左下角的垂直 右下角的垂直;

例子

讲解

这里只举例右上角水平和右上角垂直，其他角同理。效果可以这样理解
只有一个右上角垂直长度，没有右上角水平长度的也不能构成一个弧度

4参数

border-radius : 右上角弧度 左上角弧度 左下角弧度 右下角弧度

3参数

border-radius : 右上角弧度 左上角和右下角弧度 左下角弧度

2参数

border-radius : 右上角和左下角弧度 左上角和右下角弧度

1参数

border-radius : 所有角弧度

配合使用

理解

“/” 分割左右两边 即 左边为水平 右边为垂直

左边又是两个参数即 右上和左下的水平 左上和右下的水平
右边又是一个参数即 所有角的垂直

综上：右上水平50 左上水平20 左下水平50 右下水平20 / 右上垂直80 左上垂直80 左下垂直80 右下垂直80