PIE的使用_pie是什么格式的文件-CSDN博客

实际上是指的是一个名为pie的htc文件，即pie.htc，使用CSS的behavior行为，可以调用此文件，然后让IE也能实现一些常见的CSS3效果，如圆角(border-radius)，盒阴影(box-shadow)，背景渐变(gradient)，多图片背景(multiple background images)。
下载地址：https://github.com/lojjic/PIE/downloads
支持的主要CSS3属性：
1.border-radius圆角
CSS代码如下：
.pie_radius{ width:250px;height:250px;background-color:#34538b;-moz-border-radius:10px; -webkit-border-radius:10px;border-radius:10px;behavior:url(pie.htc);}
html代码如下：
<div class="pie_radius"></div>
2.box-shadow 盒阴影
CSS代码如下：
.pie_box_shadow{width:250px;height:250px;background-color:#34538b;-moz-box-shadow:1px 3px 3px #666;-webkit-box-shadow:1px 3px 3px #666;box-shadow:1px 3px 3px #666;behavior:url(pie.htc);}
html代码如下：
<div class="pie_box_shadow"></div>
3.gradient渐变
CSS代码如下：
.pie_gradient{width:250px;height:250px;background-color:#9F9;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));background:-moz-linear-gradient(#9F9, #393); -pie-background:linear-gradient(#9F9, #393);behavior:url(pie.htc); }
html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>border-radius  example</title>
<style>
.radius {
	width:50%;
	height: 200px;
	margin:100px auto;
	border:1px solid #ccc;
	border-radius: 5px;/*兼容IE6 7 8*/
	box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);/*不兼容IE6 7 8*/
	behavior:url(pie/PIE.htc);
}
</style>
</head>

<body>
<div class="radius"></div>
</body>