一、CSS3的border-radius属性
CSS3提供了border-radius属性，可以实现元素边框的圆角效果。这个属性可以设置1到4个长度值，每个值对应一个圆角。例如，设置四个圆角的半径值为5px，可以这样写：
div {
border-radius: 5px 5px 5px 5px;
}
这里的4个值分别对应左上、右上、右下、左下四个角的圆角半径，同时如果只写一个值，表示四个圆角都相同；如果写两个值，则分别对应左上/右下（第一个值）和右上/左下（第二个值）两组圆角，如果写三个值，则按照顺序分别对应左上、右上/左下、右下三个角。注：border-radius属性支持px, %, em, rem等单位。
border-radius属性的浏览器兼容性如下图赵示：
二、CSS裁剪和背景颜色的配合
CSS也可以通过裁剪元素和给元素设置背景颜色进行圆角效果的实现。假设我们有一个div元素，需要给它设置圆角效果，可以这样来实现：
div {
overflow: hidden;
background-color: #f00;
}
div img {
border-radius: 50%;
}
首先对div元素设置overflow: hidden，实现裁剪效果。然后给背景颜色设置一个特殊的颜色，用以抵消图片边角处难以遮盖的问题。最后通过给img元素添加border-radius属性来实现图片的圆角效果。需要注意的是，使用这种方法，只有一种圆角的实现（即边框下方的圆角）。
三、使用CSS伪元素的圆角边框
我们还可以使用CSS伪元素before和after来实现元素的边框圆角效果。首先，我们需要给元素设置一个position:relative的属性，这样伪元素before和after才能够为它们提供定位。然后定义伪元素的大小，position:absolute地将其定位在元素边框的四个角上，于是一个带有圆角边框的元素就被实现出来了。
div {
position: relative;
}
div::before,
div::after {
position: absolute;
content: "";
z-index: -1;
}
div::before {
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 20px;
background-color: #f00;
}
div::after {
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
border-radius: 25px;
background-color: #fff;
}
上面的代码中，我们通过伪元素before和after来分别实现了黑色和白色边框的圆角效果。这种方法同样可以实现单一和多种圆角效果，如需调整效果，只需要修改伪元素的圆角半径即可。
四、使用SVG来实现边框圆角效果
SVG是一种可扩展的矢量图形格式，通过它我们可以创建出各种复杂的图形。使用SVG的好处是无需去记住具体属性，只需要调整代码中的值即可。下面的代码使用SVG来实现圆角边框效果：
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
rect {
stroke: #f00;
stroke-width: 10;
fill: #fff;
rx: 30;
}
上述代码中，我们首先添加一个SVG元素，然后在SVG中添加一个矩形元素，通过给矩形元素设置rx属性值为30来实现圆角效果。需要注意的是，使用SVG时需要将其添加到HTML文档中。
五、结语
本文介绍了CSS圆角实现的多种方法，每种方法都有自己的优缺点。我们可以根据实际需要来选择实现方法。如果能够支持CSS3的浏览器，那么使用border-radius属性是最简单的方法；如果对浏览器的要求不高，那么使用裁剪和背景颜色的方法或者SVG都是不错的选择。如果要实现复杂和定制化的圆角效果，那么使用伪元素和JavaScript来实现则更为适合。
