border-radius用法

border-radius即盒子的圆角（没有border也能用哦）。

统一赋值（只赋1个值）

给1个值时，即为盒子四个角对称的圆角半径。

元素{
border-radius: 半径px;
}

分别赋值（赋2个值）

盒子左上和右下的圆角半径，右上和左下的圆角半径。
中间不需要逗号。

元素{
border-radius: 半径Apx 半径Cpx;
}

分别赋值（赋4个值）

盒子左上，右上，右下，左下的圆角半径。

元素{
border-radius: 半径Apx 半径Bpx 半径Cpx 半径Dpx;
}

四个圆的角

分别赋值（赋两对值）

盒子左上和右下的圆角半径，右上和左下的圆角半径。

元素{
border-radius: Apx Bpx/ Cpx Dpx;
}

斜对称的椭圆角

分别赋值（赋四对值）

盒子左上，右上，右下，左下的圆角半径的水平方向和垂直方向的值。
水平方向的值和垂直方向的值用斜线分开。
其中，如有某个角无论是水平还是垂直方向上的半径为0，则这个角不会磨圆，为直角。

元素{
border-radius: 上左横px 上右横Bpx 下右横px 下左横Bpx/上左竖px 上右竖px 下右竖px 下左竖px;
}

奇形怪状的自由圆角

对任意方向的圆角的数值进行自由设置时：

左下与右上的自由圆角

应用案例：马克杯的实现

用圆角画椭圆（杯口杯底）

border-radius实现椭圆.png

用盒子的border画一个杯子的把手。

杯子的实现.png

杯子把手的圆角设置如下：

border-radius实现杯子耳朵.png

---

2018.1.9
2018.1.11更新