border-radius

摘要

CSS 的 `border-radius` 属性允许作者对元素的角进行圆角处理。圆角可以为每个角设置不同的值，并且可以具有不同的水平和垂直半径，以产生椭圆曲线。

概述表

初始值: 0
适用范围: 所有元素，除了当 `border-collapse` 为 `collapse` 时，表格元素
继承: 否
媒体: 视觉
计算值: 如各个属性所指定
可动画: 是
CSS 对象模型属性: borderRadius
百分比: 参考边框盒的相应尺寸（宽度或高度）。

语法

border-radius: length
border-radius: length / length
border-radius: percentage
border-radius: percentage / percentage

值

length: 表示圆形半径的大小，或椭圆曲线的水平和垂直半径。可以使用 CSS <length> 数据类型中允许的任何单位来表示。`em` 单位对于按字体大小比例缩放的控件很有用。视口相对单位（`vw`、`vh`、`vmin`、`vmax`）对于按视口大小缩放的控件很有用。负值无效。您可以为所有四个角指定一个长度，或指定两个、三个或四个长度来为不同的角指定不同的长度：有关更多详细信息，请参阅语法部分。
percentage: 表示角半径的大小，以盒子边框尺寸的百分比为单位。具体来说，水平轴的百分比是指边框盒的宽度，垂直轴的百分比是指边框盒的高度。负值无效。您可以为所有四个角指定一个百分比，或指定两个、三个或四个百分比来为不同的角指定不同的百分比：有关更多详细信息，请参阅语法部分。
length / length: 指定用斜杠分隔的两组长度值等同于为角的 X 和 Y 半径指定单独的长度值，如果 X 和 Y 半径的长度不同，则会产生椭圆角。每组可以包含一个、两个、三个或四个值。
percentage / percentage: 指定用斜杠分隔的两组百分比值等同于为角的 X 和 Y 半径指定单独的百分比值，如果 X 和 Y 半径的百分比导致不同的计算值（取决于元素的宽度和高度，不同的百分比可能会导致相同的计算值；有关更多信息，请参阅备注部分），则会产生椭圆角。每组可以包含一个、两个、三个或四个值。

示例

一个值的示例

border-radius: 1em;

/* is equivalent to: */

border-top-left-radius: 1em;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;

查看实时示例

多个值的示例

border-radius: 20px 1em 1vw / 0.5em 3em;

/* is equivalent to: */

border-top-left-radius: 20px 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 1vw 0.5em;
border-bottom-left-radius: 1em 3em;

查看实时示例

创建椭圆，除非

border-radius: 50%;

/* Will be a circle if the element’s width is equal to its height */

查看实时示例

缩小曲线以避免重叠

border-radius: 100% 150%;

/* is equivalent to: */

border-radius: 40% 60%;

/* The values shrink proportionally, all multiplied by the same factor, until there is no overlap */

查看实时示例

用法

 As with any shorthand property, individual inherited values are not possible, that is border-radius:0 0 inherit inherit, which would override existing definitions partially. In that case, the individual longhand properties have to be used.

语法

border-radius 可以取一个到四个值

一个值将应用于所有四个角
两个值将分别应用于左上角 + 右下角，以及右上角 + 左下角
三个值将分别应用于左上角、右上角 + 左下角，以及右下角
四个值将分别应用于四个角，顺序为左上角、右上角、右下角、左下角

备注

border-radius 属性是一个复合属性，用于指定最多四个 border-*-radius 属性。如果斜杠之前和之后给出值，则斜杠之前的数值设置水平半径，斜杠之后的数值设置垂直半径。如果没有斜杠（“/”），则数值将相等地设置两个半径。每个半径的四个值按顺时针顺序给出，从左上角开始。如果提供的数值少于四个，则会重复这些数值，直到获得四个数值，类似于其他 CSS 属性，例如 `border-width`。
即使只指定一个半径，也可能最终得到椭圆角。当使用百分比时，这种情况会发生，因为它们会为每个轴解析为不同的数值（水平方向是边框盒宽度的百分比，垂直方向是高度的百分比）。有关演示，请参阅上面的椭圆示例（示例 #3）
由于 `border-radius` 对元素的边框盒进行圆角处理，因此内部（填充盒）的角将具有较小的半径（具体为 `border-radius - border-width`），或者如果没有圆角，则边框比 `border-radius` 值更厚。另一个结果是，如果相邻边的边框宽度不同，则填充盒的曲线将是椭圆形的。
请注意，虽然在 `border-radius` 简写中，斜杠 (/) 用于分隔水平和垂直半径，但它们在长写方式中用空格分隔。

参见

边框

署名

Mozilla Developer Network : [Border-radius 文章]
Microsoft Developer Network: [Windows Internet Explorer API 参考文章]

border-radius

摘要

概述表

语法

值

示例

用法

语法

备注

备注

相关规范

参见

相关文章

边框

相关页面

署名