1. CSS3圆角边框属性介绍
圆角边框是指在矩形元素的四个角上设置圆角，从而使矩形元素的外边框变成了圆角边框。在早期的CSS版本中，要实现圆角边框需要使用图片或者复杂的HTML代码来实现，但在CSS3中，我们可以使用简单的CSS代码来实现圆角边框，极大地方便了开发者的使用。
在CSS3中，设置圆角边框的主要属性是“border-radius”属性。该属性可以为一个或者多个圆角设置半径值，半径值越大，圆角的弧度就越大。
.border-radius{
border-radius:10px; /* 设置四个角的圆角半径都为10px */
}
2. 圆角方向
圆角方向指的是为哪些角设置圆角。在CSS3中，可以为矩形元素的四个角分别单独设置圆角属性，也可以将多个角放到一起设置圆角属性。
2.1 为单个角设置圆角
使用“border-“属性加上单词“top”、”bottom”、”left”或“right”可以对矩形元素的单个角进行圆角化。
.border-radius{
border-top-left-radius:10px; /* 设置左上角的圆角半径为10px */
border-bottom-right-radius:20px; /* 设置右下角的圆角半径为20px */
}
2.2 同时为多个角设置圆角
可以将多个圆角属性放在同一行代码里进行定义，属性值用空格隔开即可。从左上角开始，顺时针方向分别为左下角、右下角、右上角。
.border-radius{
border-radius: 10px 20px 30px 40px; /* 左上角为10px，右上角为40px，右下角为30px，左下角为20px*/
}
3. 嵌套圆角
嵌套圆角是指在某一个元素内部再嵌套一个元素，然后对内层元素进行圆角化的操作。如果不对外层元素进行处理，那么嵌套后的整体看起来仍然是矩形的，必须要对外层元素也进行圆角化处理，才能让内部的圆角显现出来。
.outer{
width: 200px;
height: 100px;
padding: 10px;
background-color: gray;
border-radius: 20px;
}
.inner{
width: 100%;
height: 100%;
background-color: white;
border-radius: 10px;
}
上面的代码示例中，我们先对外层元素进行了20px的圆角化处理，再在内部嵌套一个白色的内层元素，对该元素进行10px圆角化处理。这样，嵌套的内部元素便呈现出了圆角化效果，同时外部元素的圆角也被显示出来了，嵌套圆角的效果达成。
4. 圆角边框渐变
CSS3允许为圆角边框添加渐变，不仅可以为边框线添加渐变，还可以为圆角添加不同的颜色渐变效果。
.gradient-border {
border: 10px solid;
border-image: linear-gradient(to bottom, #F00 0%,#00F 100%);
border-radius: 20px;
}
上面的代码示例中，我们使用了从红色渐变到蓝色的渐变效果，并且将边框线的粗细设置为了10px，同时通过“border-radius”属性将矩形元素的四个角设置为圆角，最终呈现出来的便是一个圆角边框渐变效果。
5. 总结
CSS3 的圆角边框较之前的版本，可以更加方便快捷地实现圆角化的效果，主要是使用“border-radius”属性，可以对圆角的大小和位置进行自由地调整，同时还可以嵌套圆角、添加渐变等操作，让开发者可以更加灵活地定制各种页面展示效果。