您的位置：首页 > Web前端 > CSS

IE支持CSS3圓角陰影演示

2012-02-01 23:06 106 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>css3-border-radius演示</title>
<style>
body {
background-color: #FFF;
font: normal 11pt Trebuchet MS,Arial,sans-serif;
}

.box1 {
background-color: #F0F0F0;
width: 533px;
height: 50px;
margin: 0 auto 15px auto;
padding: 30px;
border: 1px solid #D7D7D7;

-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(http://www.weiking.com.cn/demo/css3-border-radius/border-radius.htc);

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
background-color: #eee;
-moz-box-shadow:2px 2px 5px #969696;/*firefox*/
-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
box-shadow:2px 2px 5px #969696;/*opera或ie9*/
}

.box2 {
width: 420px;
height: 220px;
margin: 0 auto 35px auto;
padding: 30px;
color: #FFF;
font-weight: bold;
border: 11px solid #35B70E;

-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(http://www.weiking.com.cn/demo/css3-border-radius/border-radius.htc);

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
background-color: #eee;
-moz-box-shadow:2px 2px 5px #969696;/*firefox*/
-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
box-shadow:2px 2px 5px #969696;/*opera或ie9*/
}

.box3 {
background-color: #DDD;
width: 210px;
height: 30px;
padding: 20px;
position: absolute;
top: 5px; left: 5px;

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior: url(http://www.weiking.com.cn/demo/css3-border-radius/border-radius.htc);

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
background-color: #eee;
-moz-box-shadow:2px 2px 5px #969696;/*firefox*/
-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
box-shadow:2px 2px 5px #969696;/*opera或ie9*/
}

.rel {
margin: 50px 0 0 33px;
padding: 25px;
position: relative;
z-index: inherit;
zoom: 1; /* For IE6 */
}
</style>
</head>

<body>
<div class="rel">
<div class="box1">

lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
</div>
<div class="box2">
this cat is a hybrid of domestic and wild breeds :)
</div>
<div class="box3">
this box is absolutely positioned
</div>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航