让ie支持css3部分功能

最新推荐文章于 2022-05-16 09:39:24 发布

51xj_yixi

最新推荐文章于 2022-05-16 09:39:24 发布

阅读量1k

点赞数

分类专栏： css 文章标签： ie支持css3 圆角阴影渐变背景 CSS3

本文链接：https://blog.csdn.net/yixi524/article/details/8915561

版权

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、首先明确一些概念吧

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