CSS3的大多新属性(比如:圆角、阴影、渐变、文字阴影等)在 FF、Chrome、Opera都还支持,但是IE 6-8是一点也不支持的,今天提供PIE.htc解决IE浏览器对CSS3属性的支持问题,让IE也能实现一些常见的CSS3效果,如圆角(border-radius),盒阴影(box-shadow),文字阴影(text-shadow) 背景渐变(gradient),多图片背景(multiple background images)。
一. htc文件下载地址:http://github.com/lojjic/PIE/downloads
二. CSS文件测试代码
二. CSS文件测试代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <style>
- .shadow{
- order: 1px solid #696;
- padding: 60px 0;
- text-align: center; 200px;
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- border-radius: 8px;
- -webkit-box-shadow: #666 0px 2px 3px;
- -moz-box-shadow: #666 0px 2px 3px;
- box-shadow: #666 0px 2px 3px;
- background: #FF99AF;
- background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FF99AF), to(#CDEE33));
- background: -webkit-linear-gradient(#FF99AF, #CDEE33);
- background: -moz-linear-gradient(#FF99AF, #CDEE33);
- background: -ms-linear-gradient(#FF99AF, #CDEE33);
- background: -o-linear-gradient(#FF99AF, #CDEE33);
- background: linear-gradient(#FF99AF, #CDEE33);
- -pie-background: linear-gradient(#FF99AF, #CDEE33);
- behavior: url(css/PIE/PIE.htc); //PIE.htc文件路径,该文件路径是相对于html页面的文件路径,如果用到.css文件,该文件路径依然是相对于html页面的路径
- }
- </style>
- </head>
- <body>
- <div class="shadow">
- CSS3属性(圆角、阴影、渐变、文字阴影)
- </div>
- </body>
- </html>
三. 显示效果(IE8浏览器截图)