第 127 期(W3C标准-CSS-绘制)：border-radius

[Wing Meng]

border-radius 属性用来定义边框的圆角。

语法： border-radius: none | <length>{1,4} [/ <length>{1,4}]

取值说明：

• none 默认值，表示元素没有圆角。
• <length> 数字和单位组成的长度值，不可为负数。

常见取值举例：

• border-radius: 20px 边框四个角的圆角半径为 20px
• border-radius: 20px 40px 边框左上和右下角的圆角半径为 20px，右上和左下的圆角半径为 40px
• border-radius: 20px 40px 30px 边框左上角的圆角半径为 20px，右上角和左下角的圆角半径为 40px，右下角的圆角半径为 30px
• border-radius: 20px 40px 30px 10px 边框左上、右上、右下和左下的圆角半径分别为 20px、40px、30px 和 10px
• border-radius: 20px / 40px 半径分组模式（以 / 隔开），第一组表示圆角的水平半径，这里表示边框四个角的水平半径是 20px；第二组表示圆角的垂直半径，这里表示边框四个角的水平半径是 40px
• border-radius: 20px 30px / 40px 10px 左上和右下角的水平圆角半径为 20px，右上和左下的水平圆角半径为 30px；左上和右下角的垂直圆角半径为 40px，右上和左下的垂直圆角半径为 10px
• border-radius: 20px 50px 30px / 40px 60px 10px 左上角的水平圆角半径为 20px，右上角和左下角的水平圆角半径为 50px，右下角的水平圆角半径为 30px；左上角的垂直圆角半径为 40px，右上角和左下角的垂直圆角半径为 60px，右下角的垂直圆角半径为 10px
• border-radius: 20px 50px 30px 10px / 40px 60px 10px 20px 边框四个角的水平圆角半径分别为 20px、50px、30px 和 10px（上右下左）；边框四个角的垂直圆角半径分别为 40px、60px、10px 和 20px（上右下左）

> 在线 Demo <