pie.htc的使用----使IE6/7/8兼容部分CSS3属性

一、前言

pie.htc是一个可以解决IE6/7/8无法支持CSS3属性的文件，其利用VML绘制相关的效果。要注意的是它并不能实现所有CSS3效果，其兼容的属性有：box-radius,线性渐变( linear-gradient)，rgba,box-shadow,border-image。

二、使用方法

使用behavior:url(pie.htc)引入pie.htc即可完成相关效果了。以下实例均使用IETester进行测试，主要测试IE6/7/8的效果。

（1）圆角（border-radius）

（2）盒阴影（box-shadow）

.demo{
    height: 100px ;
    width:200px;
    background: #00FFFF;
    -webkit-box-shadow: 10px 10px 5px #888888;
    -moz-box-shadow: 10px 10px 5px #888888;
    box-shadow: 10px 10px 5px #888888;
    behavior: url(static_resources/PIE.htc);
}

（3）RGBA

.demo{
    height: 100px ;
    width:200px;
    background: rgba(0,0,0,0.5);
    -pie-background:rgba(0,0,0,0.5);
    behavior: url(static_resources/PIE.htc);
}

（4）border-image(IE6/7/8只会以stretch的形式进行填充，即使border-image-repeat属性是repeat和round)

.demo{
    height: 100px ;
    width:200px;
    border:15px solid transparent;
    -webkit-border-image: url(img/border.png) 30 30 round;
    -moz-border-image: url(img/border.png) 30 30 round;
    -o-border-image: url(img/border.png) 30 30 round;
    border-image: url(img/border.png) 30 30 round;
    behavior: url(static_resources/PIE.htc);
}

Chrome下的效果

IETester下的效果

（5）background-size(针对兼容background-size使用了backgroundsize.htc,支持IE7/8,无法支持IE6)

.demo{
    height: 100px ;
    width:200px;
    background-image: url("img/1.jpg");
    background-size: cover;
    behavior: url(static_resources/backgroundsize.min.htc);
}

（6）Gradient背景渐变（支持线性渐变）

.demo{
    height: 100px ;
    width:200px;
    background:linear-gradient(90deg,#00FFFF,#0000FF);
    -pie-background:linear-gradient(0,#00FFFF,#0000FF);
    behavior: url(static_resources/PIE.htc);
}

三、下载地址

pie.htc下载地址:css3pie

backgroundsize.htc下载地址：backgroundsize.htc