标签

CSS3 PIE 让 IE6 支持部分 CSS3 特性

CSS3 PIE 可以让 IE6 到 IE8 支持以下 CSS3 的特性:

  • border-radius
  • box-shadow
  • border-image
  • 多重背景(multiple background images)
  • background 中的 linear-gradient

这么好的东西怎么用?!

直接去 下载 ,推荐 2.0 版本(虽然是测试版,三年多没更新过了)。

然后:

<style>
#div {
  width: 200px;
  height: 200px;
  -pie-background: rgba( 255,0,0,.5 );
  border-radius: 50%;
  behavior: url(pie/PIE.htc);
}
</style>

<div id="div"></div>

如果在IE8下,看到一个粉色的圆,就说明OK了。

有以下几个问题:

  • behavior 仅支持同域名下的调用,绝对路径相对路径都行。

  • behavior 要加在具体的元素上,不继承。

  • 仅支持缩写。比如:border-top-left-radius: 20px; 必须写成 border-radius: 0 0 0 20px;

  • background 需加 -pie- 前缀。

  • border-radius 和 box-shadow 可选择不加 -pie- 前缀。加了 -pie- 前缀仅在 IE9- 中有效。

  • background 支持RGBA,比如:-pie-background: rgba( 255,0,0,.5 );

  • box-shadow 支持RGBA,但从 2.0 才支持透明度。在 1.0 中:box-shadow: 2px 2px 10px rgba( 0,0,0,.5 ); 会渲染成 box-shadow: 2px 2px 10px #000;

  • 因为仅支持 -pie-background 、 border-radius 和 box-shadow ,所以 color: rgba( 0,0,0,.1 ); 的企图泡汤了。

2016-03-31 16:20:43
Ctrl + 回车 直接提交
暂无相关评论