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

最新推荐文章于 2020-07-31 14:40:03 发布

MAXLZ

最新推荐文章于 2020-07-31 14:40:03 发布

阅读量5.7k

点赞数 1

分类专栏：【Web前端】CSS

本文链接：https://blog.csdn.net/qq_33635385/article/details/82869506

版权

【Web前端】CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、前言

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）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .demo{
            height: 100px ;
            width:200px;
            border:1px solid #00FFFF;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            behavior: url(static_resources/PIE.htc);
        }
    </style>
<body>
    <div class="demo"></div>
</body>
</html>

（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);
}