css3中如何使用pie

这篇文章主要介绍了css3中如何使用pie，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

css3 pie的使用方法：首先下载CSS3PIE插件；然后将pie.htc文件，放到项目的文件夹中；接着在css代码中在需要使用css3的地方添加“behavior: url(PIE.htc)”；最后指定到htc文件的位置即可。

CSS3pie是什么？

CSS3pie是一款非常优秀的CSS3工具，可以让IE6至IE8版本实现大多数的CSS3修饰特性，如圆角、阴影、渐变等等，通过这个工具，可以在线修改想要的效果，并即时生成css代码。

css3pie怎么用？

1、下载CSS3PIE插件

下载地址：http://css3pie.com/download/ GitHub https://github.com/lojjic/PIE/downloads

2、使用

在下载完成的压缩里面，里面有三个文件，有一个名字为PIE.htc的文件，这就是让IE6-8能够支持部分css3特征的插件。

将pie.htc 文件，放到我们项目的文件夹中。

在css代码中在需要使用css3的地方添加behavior: url(PIE.htc)；指定到htc文件的位置就可以了（相对于html文档）。

示例：

包括圆角、阴影和渐变三种效果。

.pie{
width: 200px; 
height: 100px;
line-height: 100px;
font-size:14px; 
border: 1px solid #669966; 
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666666 0 2px 3px;
-moz-box-shadow: #666666 0 2px 3px ;
box-shadow: #666666 0 2px 3px ;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));   
background: -webkit-linear-gradient(#EEFF99, #66EE33);   
background: -moz-linear-gradient(#EEFF99, #66EE33); 
-pie-background: linear-gradient(#EEFF99, #66EE33); 
behavior: url(PIE.htc);
position:relative;
z-index:10;
}

效果图：

感谢你能够认真阅读完这篇文章，希望小编分享css3中如何使用pie内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!