边界半径 - CSS

简介

CSS 的边界半径属性（border-radius）用于为 HTML 元素指定一个圆角。通过设置以下四个属性，可以控制元素的圆角大小：

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

通过设置这些属性，可以将 HTML 元素的角落变得更加柔和，更加美观。

语法

CSS 边界半径属性的语法如下：

border-radius: length|percentage|initial|inherit;

这里的参数有：

• length：用于设置圆角半径的长度值。值可以是一个像素值，也可以是其他长度单位（如 em 或 rem）

• percentage：用于设置圆角半径的百分比值。它是相对于元素相应方向的高度或宽度来计算的。

• initial：用于将圆角半径重置为它的默认值。

• inherit：用于从父元素继承圆角半径的值。

示例

以下是一些使用边界半径属性的示例：

圆角半径为像素的矩形

div{
    border-radius:10px;
}

圆角半径为百分比的矩形

div{
    border-radius:20%;
}

圆形

div{
    border-radius:50%;
}

总结

CSS 的边界半径属性是一个非常有用的工具，可以帮助我们为元素添加圆角，使其看起来更加柔和和美观。此外，通过组合使用不同的边界半径属性，可以创建出各种有趣的图形和形状。