做全兼容的ie6圆角和透明图片 2

我今天写了一个关于圆角的帖子，后来觉得写的实在是不咋地。方法也很繁琐落后，有人推荐了我一个工具叫做piecss，于是尝试着去用。

?

piecss这个插件是针对于ie浏览器不支持css3而做的。他可以让ie也实现css3的某些特性，比如阴影，圆角等。现在我们就来说一下圆角。

?

下载piecss（本页面提供下载）。

加到网站目录下。

?

然后在需要用到圆角的地方，写如下代码

?

?

.xo-blocktitle {    height: 35px;    background: url("../img/content_bar.png") repeat-y;    -moz-border-radius: 10px 10px 0 0;    -webkit-border-radius: 10px 10px 0 0;    border-radius: 10px 10px 0 0;    behavior: url(/shbank/include/me/piecss/PIE.php);}

?

这里的behavior的路径我这里是绝对路径，因为behavior的路径比较特别，保险我就写了绝对路径。这里的PIE.php会把PIE.htc返回来。

?

-moz-border-radius还有-webkit-border-radius是针对ff和opera的吧。这个不谈。

这样子简简单单，效果就出来了，爽爆了。

?

接下来就是透明png图片的问题。我这里用滤镜的方法。

?

         .xo-blocktitle h3{        background-image:url(img/btitle_1.png) !important;background-image:none;background-repeat:no-repeat;         _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/btitle_1.png);}

?如果不在滤镜前加_，就会出现ff下无法正常显示的问题。所以用hack。而如果不用!important直接指定background-image（为了ff能显示背景），那么ie6下png图片又是不能正常显示，所以只能这么写了。聪明的读者应该能琢磨出来的。

?

?

?

1 楼 SpaceKnight 2012-08-03 这样实现的圆角，性能非常糟糕。另外，这个HTC有BUG。