首页 > web前端 > html/css/css3 > 兼容IE的Css圆角,Css渐变,Css阴影效果
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-12

兼容IE的Css圆角,Css渐变,Css阴影效果

Web设计中圆角、渐变效果是常用的网页表现形式,但是在IE8及以下浏览器中并不能通过代码来实现Css圆角,Css渐变等效果,以前的处理方式一般是通过图片来实现的,现在介绍一种更简便的方法,只需引入一个文件即可实现。

兼容IE的Css圆角,Css渐变,Css阴影效果

代码展示

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html5</title>
<style type="text/css">
.boxstyle{
 margin:0px auto;
 width:200px; height:100px; 
 padding:10px;
 /************渐变*******************/
 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);
 /************圆角***************/
 -moz-border-radius: 10px; /*Firefox*/ 
 -webkit-border-radius: 10px; /*Safari、Chrome*/ 
 border-radius: 10px; /*Opera 10.5+、IE 6+*/ 
 behavior: url(pie.htc); /*引用文件 调用脚本添加圆角效果 */ 
 border:solid 5px #b20807;
 /**********阴影**/
 -moz-box-shadow: 0px 0px 3px #06C; /* Firefox */ 
 -webkit-box-shadow: 0px 0px 3px #06C; /* Safari and Chrome */ 
 box-shadow: 0px 0px 3px #06C; /* Opera 10.5+、IE6+*/ 
}
</style> 
</head>
<body> 
<div class="boxstyle">在这里看效果</div>
</body>
</html>

示例下载

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*