CSS3的一些特新在IE6中的实现--PIE（progressive internet explorer）

痛定思痛。 2022-08-27 04:51 109阅读 0赞

progressive internet explore![logo.png][]

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

PIE使得一些CSS3的特性在IE6—9中得到渲染。

例子：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src=""></script>
    <style type="text/css">
    	
    	#myAwesomeElement {
    		border: 1px solid #696;
    		padding: 60px 0;
    		text-align: center; width: 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: #EEFF99;
    		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
    		background: -webkit-linear-gradient(#EEFF99, #66EE33);
    		background: -moz-linear-gradient(#EEFF99, #66EE33);
    		background: -ms-linear-gradient(#EEFF99, #66EE33);
    		background: -o-linear-gradient(#EEFF99, #66EE33);
    		background: linear-gradient(#EEFF99, #66EE33);
    		-pie-background: linear-gradient(#EEFF99, #66EE33);
    		
    	    behavior: url(PIE-1.0.0/PIE.htc);
    	}
    </style>
    </head>
    <body>
    <div id="myAwesomeElement">PIE</div>
    </body>
    </html>

效果：

![SouthEast][]

其他的特性及使用方法，可参考PIE的官方网站的文档[http://css3pie.com/documentation/supported-css3-features/][http_css3pie.com_documentation_supported-css3-features]

PIE的官方网址：[http://css3pie.com/][http_css3pie.com]，访问可能会出现无法访问，可使用代理访问。

PS：在使用的时候记得在末尾添加上PIE的引用：behavior: url(PIE-1.0.0/PIE.htc);

[logo.png]: /images/20220824/b971077f6ee845d2b77f3c505737a43a.png
[SouthEast]: /images/20220824/7972ba9aa078496d8418ac1f4f815e37.png
[http_css3pie.com_documentation_supported-css3-features]: http://css3pie.com/documentation/supported-css3-features/
[http_css3pie.com]: http://css3pie.com/