CSS border-radius 属性详解：创建圆角边框

CSS border-radius 属性

border-radius 属性用于设置元素的圆角半径。您可以应用它到元素的所有四个角，也可以单独设置单个角的半径。

语法:

border-radius: <数值或百分比> | <数值或百分比> <数值或百分比> | <数值或百分比> <数值或百分比> <数值或百分比> <数值或百分比>;

值:

• 数值或百分比: 指定圆角半径。数值可以是像素 (px)、点 (pt)、英寸 (in) 等单位，百分比相对于元素框的大小计算。
• 多个值: 使用四个值（按顺序分别为左上角、右上角、右下角、左下角的半径）来设置不同角的圆角半径。

示例:

/* 设置所有角为 5px 圆角 */
border-radius: 5px;

/* 设置左上角和右下角为 10px 圆角，右上角和左下角为 5px 圆角 */
border-radius: 10px 5px;

/* 设置每个角的圆角半径 */
border-radius: 10px 5px 5px 10px;

/* 设置左上角为 10% 的圆角 */
border-radius: 10%;

/* 设置没有圆角 */
border-radius: 0;

注意:

• border-radius 属性可以与其他 CSS 属性一起使用，例如 border 和 background，来创建更复杂的效果。
• 为了兼容性，请确保您的代码使用 border-radius 属性的现代浏览器支持版本。