div 边框阴影
关于网页页面边框阴影的实现浏览次数:858次悬赏分:30|解决时间:2009-10-3119:42|提问者:飞剑侠
比如这个网页
http://www.w3school.com.cn/index.html
我想知道这个最外面的阴影是怎么做出来的,是CSS还是什么?能从源代码帮我指出来吗?
最佳答案<html>
<head>
<title>bluewolfe<br></title>
<style>
body{
margin:0px;
padding:20px;
font-family:verdana;
font-size:12px;
}
/*CSScontainershadow*/
#shadow-container{
position:relative;
left:3px;
top:3px;
margin-right:3px;
margin-bottom:3px;
}
#shadow-container.shadow2,
#shadow-container.shadow3,
#shadow-container.container{
position:relative;
left:-1px;
top:-1px;
}
#shadow-container.shadow1{
background:#F1F0F1;
}
#shadow-container.shadow2{
background:#DBDADB;
}
#shadow-container.shadow3{
background:#B8B6B8;
}
#shadow-container.container{
background:#ffffff;
border:1.5pxsolid#848284;(这里就是阴影数据设定)
padding:10px;
}
/*CSScontainershadow*/
</style>
</head>
<body>
<divid="shadow-container">
<divclass="shadow1">
<divclass="shadow2">
<divclass="shadow3">
<divclass="container">
bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>
bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>
bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>
bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>bluewolfe<br>
</div>
</div>
</div>
</div>
</div>
</body>
</html>