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>

相关推荐