1. 前言
圆角边框是网页设计中常见的一个元素，可以为页面增加一些柔和、现代的感觉。在CSS中，我们可以使用边框半径属性（border-radius）来实现圆角边框的效果。本文将介绍CSS圆角边框的制作指南，并提供实例供参考。
2. border-radius属性
border-radius是CSS3中的一个属性，用于控制元素边框的圆角大小。该属性可以接受一个或多个长度值，这些值可以是像素、百分比或em单位。
2.1 设置统一的圆角半径
要设置统一的圆角半径，可以直接将border-radius属性应用于元素，并指定一个长度值作为圆角的半径。例如：
.example {
border-radius: 10px;
}
上述代码将为名为example的元素设置一个10像素的圆角边框。
2.2 设置不同的圆角半径
如果要设置不同的圆角半径，可以使用四个长度值分别表示元素的四个角。例如：
.example {
border-radius: 10px 5px 20px 15px;
}
上述代码将为名为example的元素设置一个左上角为10像素、右上角为5像素、右下角为20像素、左下角为15像素的圆角边框。
3. 实例
下面将提供一些实例，展示不同类型的圆角边框。
3.1 四个角都为圆角
.example {
border-radius: 10px;
}
该实例将为名为example的元素设置四个角为10像素的圆角边框。
3.2 左上角和右下角为圆角
.example {
border-radius: 10px 0 0 10px;
}
该实例将为名为example的元素设置左上角和右下角为10像素的圆角边框，其他两个角为直角。
3.3 椭圆形边框
.example {
border-radius: 50%;
}
该实例将为名为example的元素设置一个椭圆形边框。
4. 总结
通过border-radius属性，我们可以轻松实现各种形状的圆角边框。使用统一的圆角半径可以创建协调的视觉效果，而设置不同的圆角半径则可以实现更多样化的设计。希望本文的指南和实例对您在使用CSS制作圆角边框有所帮助。
参考链接：https://www.w3schools.com/cssref/css3_pr_border-radius.asp