纯CSS3实现圆角效果（含IE兼容解决方法）

1. 圆角效果的CSS3属性

在CSS3中，有四个新属性可以实现圆角的效果，分别是：

• border-radius：设置边框的圆角，作用于元素的四个角，可以单独设置每个角的大小。
• border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius：可以分别设置某个角的大小。一般与border-radius属性一起使用。

这四个属性的实现原理是：将PHP文件解析成HTML文件后，通过CSS来绘制一定大小、不带边框的圆形，以实现圆角效果。

2. 圆角效果的实现方法

2.1 使用border-radius属性实现

使用border-radius属性可以在无需额外定制图片的情况下实现圆角效果。

示例代码如下：

.box {
    border: solid 1px #ccc;
    border-radius: 10px;
    padding: 10px;
}

以上代码可以使一个具有灰色实线边框的盒子，其四个角均为半径为10px的圆形。

2.2 兼容IE浏览器

上述方法仅适用于现代浏览器，如果需兼容IE浏览器，可使用CSS3 Pie插件（官方网站）。

首先，需要将CSS3 Pie插件中的PIE.htc文件，放到对应网站的根目录中。

接着在样式表中，使用如下代码：

.box {
    border: solid 1px #ccc;
    border-radius: 10px;
    padding: 10px;
    behavior: url(PIE.htc);
}

只需在原有的CSS代码基础上，添加一个behavior属性即可。

3. 总结

CSS3中的border-radius属性和兼容IE浏览器的解决方案，是实现圆角效果的可以选择方法。它们的优点在于可以减少图片的使用，减小HTTP请求和页面的大小，同时也有助于网站的性能优化。