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