钟文志的部落格

Appearance

在CSS3中，圆角（Border Radius）是一个非常有用的属性，它允许开发者为元素的边框添加圆角效果。通过border-radius属性，你可以控制元素角落的圆角半径，使得元素的边框看起来更加平滑和现代化。

基本用法 ​

css
/* 设置所有角的圆角半径为10px */
border-radius: 10px;

在上面的例子中，所有四个角的圆角半径都被设置为10像素。这种简单的用法会将所有的角落都变成圆角。

分别设置每个角的圆角半径 ​

css
/* 分别设置每个角的圆角半径 */
border-radius: 10px 20px 30px 40px;

上面的例子中，分别设置了每个角的圆角半径，顺序是左上角、右上角、右下角、左下角。

设置水平和垂直方向的圆角半径 ​

css
/* 水平方向为20px，垂直方向为40px */
border-radius: 20px / 40px;

使用斜杠（/）可以分别设置水平和垂直方向的圆角半径。上面的例子中，水平方向的圆角半径为20像素，垂直方向的圆角半径为40像素。

实际示例 ​

下面是一个简单的HTML示例，演示了如何使用border-radius属性来创建带有圆角的盒子：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 圆角示例</title>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        border: 2px solid #ccc;
        border-radius: 20px; /* 圆角半径为20px */
        padding: 20px;
        margin: 20px;
        text-align: center;
        line-height: 160px;
    }
</style>
</head>
<body>
    <div class="box">Round Box</div>
</body>
</html>

在这个示例中，.box类的元素设置了一个20像素的圆角，使得盒子的角看起来更加柔和和现代化。

通过这些例子，你可以看到如何使用CSS3的border-radius属性来创建各种不同的圆角效果，从而使得你的网页设计更加具有吸引力和美观。