border-radius的浏览器兼容

时间:2024-12-21 10:37:50

早期开发时,圆角的实现对于开发者来说是一个头疼的事情,因为需要添加多种图片以及定位去实现固定、缺乏灵活性的圆角容器,故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属性的!