border-radius的浏览器兼容

早期开发时，圆角的实现对于开发者来说是一个头疼的事情，因为需要添加多种图片以及定位去实现固定、缺乏灵活性的圆角容器，故css3中引入了border-radius属性，使得开发者实现圆角变得轻而易举！

border-radius属性的语法很简单：如：

border-radius:10px;
border-radius:0px 0px 10px 10px;
border-radius:0px 10px 20px;
border-radius:10px 20px;

利用上面css语句可以分别定义四个圆角，其单位可以使用像素或其它任何CSS单位。其四个值分别对应左上角、右上角、右下角和左下角。

针对border-radius属性，还可以指定以正斜杠隔开的x和y两个值来表示圆角的水平与垂直半径，如：

border-radius:10px/20px;
border-radius:5px 10px 15px 30px/30px 15px 10px 5px;

 

所有现代浏览器都支持圆角，但那些旧浏览器（IE6-IE8）我们又该如何解决这个问题呢？我们使用CSS3PIE问题就能迎刃而解，你可以从http://css3pie.com获得CSS3PIE，将文件解压并将PIE.htc保存至工作目录。

接下来，你只需要在CSS中将下面的属性添加给需要支持圆角的元素就可以了

behavior: url(path/PIE.htc);

其实，针对某个页面或多个页面，最简单的办法就是将它应用到所有的<div>中，但不推荐使用*{}的方式将该属性应用到所有元素，因为可能会出现匪夷所思的结果，而且*选择器本身的渲染性能很差。

注意：以上代码的path路径指的是PIE.htc文件的路径针对使用该CSS文件的HTML文件的相对路径，而不是针对CSS文件的路径。这是由HTC文件的工作方式决定的：它是在CSS被应用到HTML后才改变CSS的behavior属性的！