七空幻音LOGO

七空幻音

让IE6-IE8能够使用圆边角、阴影等效果2015-11-02 01:40:20

昨天制作页面的时候考虑到兼容IE8、7、6的时候,知道IE8以下不支持CSS3属性,然后网站找到一个叫做css3pie的一个工具,该工具能够让IE使用圆边角、阴影等属性。

CSS3PIE官网:https://css3pie.com(官网是英文的,大家可以用翻译工具查看)

官方下载地址:https://css3pie.com/download/

打包下载地址:CSS3PIE下载提取PIE.htc文件放到一个目录文件下使用非常简单,只需要将css3pie.htc文件用behavior:url(htc所在文件路径);即可,注意:此处路径必须以HTML文件所在位置的路径算。


   <div class="border-radius"></div>
    <div class="box-shadow"></div>
    <div class="border-image"></div>

        .border-radius{
            border:1px solid red;
            width:100px;
            height:100px;
            background:red;
            border-radius:50%;
            -ms-border-radius:50%;
            -webkit-border-radius:50%;
            -moz-border-radius: 50%;
            behavior: url(PIE.htc);/*这里路径必须是以HTML所在文件来计算路径,否则无效*/
        }
        .box-shadow{
            width:100px;
            height:100px;
            box-shadow:5px 5px 10px black;
            background:red;
            behavior:url(PIE.htc);
        }
        .border-image{
            width:100px;
            height:100px;
            background:red;
            border:10px solid blue;
            border-image:url('images/background1.jpg')50 50 round;
            behavior: url(PIE.htc);
        }


这样就可以在IE6-8里面使用了css3部分属性了,还没完。我在这里先介绍这3种常用的。

官方文档中还有一些属性,随着版本不同支持的属性也就跟多了。

官方beta2.0版本又支持了一些新的CSS3属性,大家可以去官方文档处查看。

官方CSS3支持属性文档:https://css3pie.com/documentation/supported-css3-features/

CSS3背景(-pie-background)
梯度
RGBA颜色
-pie-load-path
-pie-watch-ancestors
PNG alpha透明度和-pie-png-fix
延迟初始化(-pie-lazy-init)
布局轮询(-pie-poll)
盘旋跟踪(-pie-track-hover)
主动跟踪(-pie-track-active)


这是刚才代码在IE8 7 6中的效果,亲测可用~

9条评论

    一共 1 页

    评论

    详细图片
    载入中...