CSS圆角属性（border-radius）

点击打开在线编译器，边学边练

在制作网页的过程中，有时我们可能需要实现圆角的效果，以前的做法是通过切图（将设计稿切成便于制作成页面的图片），使用多个背景图像来实现圆角。在 CSS3 出现之后就不需要这么麻烦了，CSS3 中提供了一系列属性来设置元素的圆角效果，如下所示：

border-top-left-radius	为元素左上角设置圆角效果
border-top-right-radius	为元素右上角设置圆角效果
border-bottom-right-radius	为元素右下角设置圆角效果
border-bottom-left-radius	为元素左下角设置圆角效果
border-radius	上面四个属性的简写形式，可以同时为元素的四个角设置圆角效果

上述函数的可选值如下表所示：

值	描述
length	通过数值加单位的形式定义圆角的形状
percentage	以百分比的形式定义圆角的形状

border-radius用来实现圆角边框。

举例：

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果：

圆角边框

但是如果我把border-radius设为150px，就会变成圆形边框

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            border-radius: 150px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果：

圆形边框

为了方便，直接把border-radius设为50%也行。效果是一样的。

但是如果想画圆，则width和height必须要相等。

事实上，border-radius后可以接多个属性值，像上面的一个属性值则默认四角都为该属性值，若是四个属性值显然是与四角相对，这么个相对法呢？从左上角开始，顺时针一一对应。

举例说明：

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background: rgb(0, 162, 255);
            border-radius: 50px 0px 20px 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果：

border-radius

举例画个鸡蛋吧：

<html>
<head>
    <style>
        div {
            width: 80px;
            height: 100px;
            border: 1px solid black;
            background: rgb(0, 162, 255);
            border-radius: 40px 40px 40px 40px/60px 60px 40px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果：