CSS3 圆角，这个是网页设计中常见的效果。圆角不仅能让页面看起来更加柔和和现代化，而且能用于各种元素，如按钮、输入框、图片等。

1. border-radius 基础

border-radius 属性用于为元素的边框添加圆角。它可以设置元素的四个角，或者只设置某些角的圆角。

语法：

border-radius: <length> | <percentage>;

• <length>：通常是 px 或 em，指定角的圆度。
• <percentage>：百分比值，表示角的圆度相对于元素的宽度或高度。

示例：

div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border-radius: 20px; /* 给所有四个角添加圆角 */
}

2. 分别设置四个角的圆角

你还可以单独为每个角设置不同的圆角半径，这样可以实现更加灵活的效果。

语法：

border-radius: <top-left> <top-right> <bottom-right> <bottom-left>;

• <top-left>：左上角圆角的半径。
• <top-right>：右上角圆角的半径。
• <bottom-right>：右下角圆角的半径。
• <bottom-left>：左下角圆角的半径。

示例：

div {
    width: 200px;
    height: 100px;
    background-color: lightgreen;
    border-radius: 10px 20px 30px 40px; /* 四个角分别设置不同的圆角 */
}

3. 使用百分比值设置圆角

当使用百分比来设置 border-radius 时，圆角的大小是根据元素的宽度和高度来计算的。如果元素的宽度和高度相等（例如正方形），那么百分比设置会使元素变成一个圆形。

示例：

div {
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    border-radius: 50%; /* 将元素转为圆形 */
}

在这个例子中，50% 使元素的角成为圆形，从而形成一个圆。

4. 椭圆形圆角（Elliptical Border Radius）

border-radius 不仅支持圆形（正方形），还可以支持椭圆形。通过为水平半径和垂直半径分别指定不同的值，可以创造出椭圆形的圆角效果。

语法：

border-radius: <horizontal-radius> <vertical-radius>;

示例：

div {
    width: 200px;
    height: 100px;
    background-color: lightyellow;
    border-radius: 50px 25px; /* 水平半径 50px，垂直半径 25px，形成椭圆形圆角 */
}

5. 使用 border-radius 创建圆形元素

通过组合适当的宽高和 border-radius，你可以创建各种形状，包括圆形和椭圆形。

圆形按钮：

button {
    width: 100px;
    height: 100px;
    background-color: steelblue;
    color: white;
    border-radius: 50%; /* 圆形 */
    border: none;
    text-align: center;
    line-height: 100px; /* 垂直居中文本 */
}

6. 结合其他 CSS3 属性实现复杂效果

border-radius 可以与其他 CSS3 特性结合使用，创造更多复杂和动态的效果。例如，结合 box-shadow、gradient 或 transition 等属性，可以轻松创建具有圆角的按钮、卡片等元素，带有阴影和渐变效果。

示例（圆角按钮加阴影）：

button {
    width: 150px;
    height: 50px;
    background-color: tomato;
    color: white;
    border-radius: 25px; /* 圆角按钮 */
    border: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* 阴影 */
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: darkred; /* 鼠标悬停时变色 */
}

7. 常见应用场景

• 按钮：圆角按钮常见于现代网页设计。
• 输入框：圆角输入框更具亲和力，常用在表单设计中。
• 卡片设计：给卡片元素添加圆角，呈现更柔和、现代的设计风格。
• 图像：通过 border-radius 可以让图片的四个角变圆，或是将图片做成圆形。

总结

CSS3 的 border-radius 属性非常强大，可以帮助开发者轻松实现圆角效果。无论是简单的圆角矩形，还是复杂的椭圆形和圆形元素，border-radius 都可以提供灵活的解决方案。

通过 border-radius，你可以创建更加现代化、柔和的页面设计。如果你将它与其他 CSS3 属性（如渐变、阴影、动画等）结合使用，将能够设计出更加炫酷和吸引用户的界面。