让IE6-IE8能够使用圆边角、阴影等效果
- 2015-11-01 17:40:20
- 幻音い
- 8438
温馨提示: 这篇文章于3309天前编写,现在可能不再适用或落后.
昨天制作页面的时候考虑到兼容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中的效果,亲测可用~
阁下需要登录后才可以查看评论哦~