一、首先明确一些概念吧
1、.htc文件
HTC 提供了一种简单的机制在脚本中实现 DHTML 行为。一个 HTC 文 件就是一个以 .htc 扩展名存储的 HTML 文件,它包含脚本和一组 HTC 特有的自定义元素。这些元素描述 了 HTML 组件定义的属性、方法和事件。 在脚本中可以通过它们各自的 ID 属性访问所有 HTC 元素。这样,可以 通过脚本动态操纵 HTC 元素的所有属性和方法。
使用:behavior: url(css/pie.htc);
二、使用实例
<!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>css3---支持浏览器</title>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/PIE_IE678.js"></script>
<![endif]-->
<style>
.hy_radius{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #fff;
behavior: url(css/pie.htc);
}
.egr{
border: 1px solid #696;
padding: 60px 0;
text-align: center;
width: 200px;
}
.egr1{
border: 1px solid #696;
padding: 60px 0;
text-align: center;
width: 200px;
-webkit-border-radius: 8px 18px 28px 38px;
-moz-border-radius: 8px 18px 28px 38px;
border-radius: 8px 18px 28px 38px;
background: #D3A33F;
}
.hy_shadow{
-webkit-box-shadow: #666 8px 8px 5px;
-moz-box-shadow: #666 8px 8px 5px;
box-shadow: #666 8px 8px 5px;
background: #fff;
behavior: url(css/pie.htc);
}
.sd{
border: 1px solid #696;
padding: 60px 0;
text-align: center;
width: 200px;
}
.sd1{
float:left;
-webkit-box-shadow: #D3A33F 8px 8px 10px;
-moz-box-shadow: #D3A33F 8px 8px 10px;
box-shadow: #D3A33F 8px 8px 10px;
margin:20px 20px;
}
.sd2{
float:left;
margin:20px 20px;
}
.hy_gradient{
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#E213Ef));
background: -moz-linear-gradient(#fff, #E213Ef);
-pie-background: linear-gradient(#fff, #E213Ef);
behavior: url(css/pie.htc);
}
.gd{
border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;background: #fff;
}
.gd1{
float:left;
margin:20px 20px;
}
.hy_opacity{
filter:alpha(opacity=50); /* for IE8 and earlier */
opacity:.5; /* for IE9 and other browsers */
background:#D3A33F;
}
.ho1{
float:left;
width:200px;
height:200px;
}
</style>
</head>
<body>
<p>让所有圆角特效 继承该class----hy_radius----</p>
<div class="hy_radius egr"></div>
<div class="hy_radius egr1"></div>
<p>让所有阴影特效 继承该class----hy_shadow--</p>
<div class="hy_shadow sd"></div>
<div class="hy_shadow sd sd1"></div>
<div class="hy_shadow hy_radius sd sd2"></div>
<p style=" clear:both">让所有背景渐变特效 继承该class-----hy_gradient----</p>
<div class="hy_gradient gd"></div>
<div class="hy_gradient hy_shadow gd gd1"></div>
<div class="hy_gradient hy_shadow hy_radius gd gd1"></div>
<p style=" clear:both">让所有透明特效继承该class----------</p>
<div class="hy_opacity ho1">dsadadw</div>
</body>
</html>
三、demo地址
http://download.csdn.net/detail/yixi524/5358349
求点击 jieritaoli