CSS 属性：border-radius
圆角。
指定一个四分之一圆或椭圆的半径，该四分之一圆或椭圆构成盒子边框区域外边缘的角。这是一个通用的圆角属性，不需要边框即可生效。
一个简写属性，组合了 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius。
可能的值
| 值 | 注意 | 示例 |
|---|---|---|
| [length] | 为每个角设置统一的圆形半径。 | 1em |
| [percentage] | 为每个角设置统一的椭圆半径。水平半径按边框盒宽度的百分比计算。垂直半径按边框盒子高度的百分比计算。 | 50% |
| [值] [值] | 第一个值用于左上角和右下角。第二个值用于右上角和左下角。 | 10px 20px |
| [值] [值] [值] | 第一个值用于左上角。第二个值用于右上角和左下角。第三个值用于右下角。 | 10px 20px 30px |
| [值] [值] [值] [值] | 第一个值用于左上角。第二个值用于右上角。第三个值用于右下角。第四个值用于左下角。 | 10px 20px 30px 40px |
[值] / [值] | 第一组值指定水平半径。第二组值指定垂直半径。 | 10px 20px / 5px 10px |
inherit | ||
initial | ||
unset | ||
示例
.box1 { border-radius: 10px; }
/* Corners have rounding made from a circle with a radius of 10 pixels. */
.box2 { border-radius: 10px 20px; }
/* Top-left and bottom-right corners have rounding made from a circle with a radius of 10 pixels.
Top-right and bottom-left corners have rounding made from a circle with a radius of 20 pixels. */
.box3 { border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
/* Top-left corner has rounding made from an ellipse with a horizontal radius of 10 pixels and a vertical radius of 5 pixels.
Top-right corner has rounding made from an ellipse with a horizontal radius of 20 pixels and a vertical radius of 10 pixels.
Bottom-right corner has rounding made from an ellipse with a horizontal radius of 30 pixels and a vertical radius of 15 pixels.
Bottom-left corner has rounding made from an ellipse with a horizontal radius of 40 pixels and a vertical radius of 20 pixels. */