CSS border-radius 属性

CSS border-radius 语法

在 CSS 中，border-radius 属性用于给元素定义圆角效果。

语法：

border-radius: 10px;
border-radius: 10px 20px;
border-radius: 10px 20px 30px;
border-radius: 10px 20px 30px 40px;

说明：

border-radius 属性的取值有 4 种情况。

/* 设置1个值（最常用） */
border-radius: 10px;

当 border-radius 设置 1 个值时，比如 border-radius: 10px; 表示 4 个角的半角都是 10px，如下图所示。

border-radius设置1个值

/* 设置2个值 */
border-radius: 10px 20px;

当 border-radius 设置 2 个值时，比如 border-radius: 10px 20px; 表示左上角和右下角的半径为 10px，而右上角和左下角的半径为 20px。其中 border-radius: 10px 20px; 等价于 border-radius: 10px 20px 10px 20px;

border-radius设置2个值

/* 设置3个值 */
border-radius: 10px 20px 30px;

当 border-radius 设置 3 个值时，比如 border-radius: 10px 20px 30px; 表示左上角半径为 10px，右上角和左下角半径为 20px，右下角半径为 30px。其中 border-radius: 10px 20px 30px; 等价于 border-radius: 10px 20px 30px 20px;

border-radius设置3个值

/* 设置4个值 */
border-radius: 10px 20px 30px 40px;

当 border-radius 设置 4 个值时，比如 border-radius: 10px 20px 30px 40px; 表示左上角半径为 10px，右上角半径为 20px，右下角半径为 30px，左下角半径为 40px。

border-radius设置4个值

提示:

border-radius 的取值除了可以是长度值，还可以是百分比。对于水平半径，百分比相对于盒子的宽度；对于垂直半径，百分比相对于盒子的高度。
如果使用 border-radius 给容器设置了圆角，但内部的子元素（如图片）依然是直角并覆盖了圆角。想要解决这个问题，我们应该给容器添加 overflow: hidden; 属性，来将溢出的内容裁剪掉。

CSS border-radius 摘要

属于	CSS 圆角
使用频率	高
是否继承	否
默认值	0
兼容性	查看
官方文档	查看
MDN	查看

CSS border-radius 示例

接下来，我们通过几个简单的例子来讲解一下 CSS border-radius 属性是如何使用的。

示例 1：border-radius 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 150px;
            margin-bottom: 10px;
            background-color: skyblue;
        }
        div:nth-child(1) { border-radius: 10px; }
        div:nth-child(2) { border-radius: 20px; }
        div:nth-child(3) { border-radius: 30px; }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

页面效果如下图所示。

border-radius 基本用法

示例 2：border-radius 实现圆

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

border-radius实现圆

分析：

想要实现一个圆，实现原理是这样的：元素的宽度和高度定义为相同值，然后 4 个角的圆角半径定义为宽度（或高度）的一半（或者 50%）。

示例 3：border-radius 实现半圆

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

border-radius实现半圆

分析：

想要实现一个上半圆，实现原理是这样的：把高度（height）设为宽度（width）的一半，并且左上角和右上角的圆角半径定义与元素的高度一致，而右下角和左下角的圆角半径定义为 0。

其他半圆（如下半圆、左半圆、右半圆）的原理是大同小异，小伙伴们可以自行尝试一下。

CSS border-radius 实现椭圆

border-radius 同样可以实现一个椭圆，不过它的语法稍微有点不一样。

语法：

border-radius: x / y;

说明：

x 表示水平半径，y 表示垂直半径。

当 border-radius 属性取值为 1 个值时，例如 “border-radius: 30px;” 表示圆角水平半径和垂直半径为 30px，也就是说 “border-radius: 30px;” 等价于 “border-radius: 30px / 30px”，前者是后者的缩写，效果如下图所示。

border-radius:30px;

当 border-radius 属性取值为 2 个值时，例如 “border-radius: 20px / 40px;” 表示圆角的水平半径为 20px，垂直半径为 40px，效果如下图所示。

border-radius: 20px / 40px;

示例 4：border-radius 实现椭圆

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 100px;
            border-radius: 100px / 50px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

border-radius实现椭圆

分析：

如果想要实现椭圆，原理是这样的：元素的宽度和高度不相等，其中 4 个角的圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半。

border-radius 派生子属性

border-radius 属性派生出了 4 个子属性（如下表所示），这些属性用于单独设置某个角的半径。

border-radius 派生子属性
子属性	说明
border-top-right-radius	右上角半径
border-bottom-right-radius	右下角半径
border-bottom-left-radius	左下角半径
border-top-left-radius	左上角半径