CSS3圆角是一种常用的样式效果，可以让元素的边角变得圆润。它不仅可以使页面更加美观，还可以增加用户体验。在本文中，我们将介绍一些常见的CSS3圆角实例代码，帮助您更好地理解和运用这一特性。

1. 圆角边框

使用CSS3的border-radius属性可以实现元素的圆角边框。例如，我们可以使用以下代码将一个元素的边框变为圆角：

</>code
<style>
    .box {
        width: 200px;
        height: 200px;
        border: 2px solid #000;
        border-radius: 10px;
    }
</style>
<div class="box"></div>

在上述代码中，我们创建了一个宽高为200px的元素，并设置了2px的黑色实线边框。通过border-radius属性，我们将边框的角变为10px的圆角。

2. 圆角按钮

圆角按钮是Web页面中常见的元素之一，可以通过CSS3的border-radius属性和背景颜色来实现。以下是一个简单的圆角按钮实例代码：

</>code
<style>
    .button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #ff0000;
        color: #fff;
        border-radius: 5px;
        text-decoration: none;
    }
</style>
<a href="#" class="button">点击我</a>

在上述代码中，我们创建了一个带有红色背景的圆角按钮。通过设置padding属性来调整按钮的内边距，使用border-radius属性来设置按钮的圆角半径。

3. 圆角图片

通过CSS3的border-radius属性，我们可以为图片添加圆角效果。以下是一个实现圆角图片的示例代码：

</>code
<style>
    .image-container {
        width: 200px;
        height: 200px;
        overflow: hidden;
        border-radius: 50%;
    }
    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
<div class="image-container">
    <img src="image.jpg" alt="图片">
</div>

在上述代码中，我们创建了一个200px × 200px的容器，并使用border-radius属性将其变为圆形。通过overflow属性设置溢出部分的处理方式，我们确保图片在容器中显示完整。使用object-fit属性来调整图片的填充方式。

4. 圆角卡片

圆角卡片可以为页面增添层次感和美观度。以下是一个简单的圆角卡片实例代码：

</>code
<style>
    .card {
        width: 300px;
        height: 200px;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 20px;
    }
</style>
<div class="card">
    <h3>卡片标题</h3>
    这是一个圆角卡片的示例。
</div>

在上述代码中，我们创建了一个宽度为300px、高度为200px的卡片。通过使用border-radius属性，我们将卡片的边角变为10px的圆角。使用box-shadow属性可以为卡片添加阴影效果，增强其立体感。

总结：

本文介绍了一些常见的CSS3圆角实例代码，包括圆角边框、圆角按钮、圆角图片和圆角卡片。通过合理运用border-radius属性，我们可以轻松地实现这些效果，为页面增添美观度和用户体验。希望本文能对您理解和运用CSS3圆角有所帮助。