首页 > 编程笔记

CSS border-radius属性的用法

想制作一个圆角的 div 块，如果一个 div 块的 4 个角具有相同的圆角半径，则给 border-radius 属性设置一个值即可。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
.round {
    border-radius: 20px;
    background-color:#ccc;
    padding: 20px;
    width: 300px;
    height: 100px;
}
</style>
</head>
<body>
    <div class="round"></div>
</body>
</html>

效果如下图所示：

图 1 统一设置圆角

如果各个角的圆角半径不同，则可以先设置一个统一的值，然后对特殊的角进行单独设置，或者直接对 4 个角分别设置圆角半径。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
.round {
    background: #ccc;
    width: 300px;
    height: 100px;
    margin:20px;
}
.round-up {
    border-radius: 10px;
    border-top-right-radius:40px;
}
.round-down {
    border-radius: 10px 20px 40px 60px;
}
</style>
</head>
<body>
     <div class="round round-up"></div>
     <div class="round round-down"></div>
</body>
</html>

效果如下图所示：

图 2 单独设置圆角

上面 div 块的 4 个角被统一设置为 10px，然后单独把右上角设为了 40px。单独设置某个角的圆角半径的属性是 border-*-*-radius，例如 border-top-right-radius:40px;，上、下方向在前，左、右方向在后。

如果是单独设置各个角的圆角半径，并且仍然使用 border-radius 属性，则规则如下：

4 个值：第 1 个值为左上角，第 2 个值为右上角，第 3 个值为右下角，第 4 个值为左下角；
3 个值：第 1 个值为左上角，第 2 个值为右上角和左下角，第 3 个值为右下角。
2 个值：第 1 个值为左上角与右下角，第 2 个值为右上角与左下角。
1 个值：4 个圆角值相同。

另外，对于一个圆角，还可以使其产生椭圆的效果，甚至可以用这种方式制作椭圆形，而且制作起来也非常方便，例如：

<!DOCTYPE html>
<html>
<head>
<style>
.round {
    border-radius: 150px/50px;
    background: #ccc;
    width: 300px;
    height: 100px;
    margin:20px;
}

</style>
</head>
<body>
    <div class="round"></div>
</body>
</html>

效果如下图所示：

图 3 通过圆角实现椭圆形

border-radius:150px/50px 表示水平方向的半径为 150px，这里正好是整个 div 块宽度的一半。竖直方向的半径为 50px，正好也是 div 块高度的一半，这样就可以得到一个长宽比为 3:1 的椭圆形。

由此可见，使用 CSS3 来制作（圆形或者）椭圆形是非常方便的。

border-radius 属性也可以使用百分比进行设置，其表示圆角半径与边长的比例。例如在上例中设置 border-radius：50% 可以得到和图 3 完全相同的效果。

CSS border-radius属性的用法

推荐阅读