关于网页页面边框阴影的实现 浏览次数:858次悬赏分:30 | 解决时间:2009-10-31 19: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;
}
/* CSS container shadow */
#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.5px solid #848284; (这里就是阴影数据设定)
padding: 10px;
}
/* CSS container shadow */
</style>
</head>
<body>
<div id="shadow-container">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="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>
比如这个网页
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;
}
/* CSS container shadow */
#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.5px solid #848284; (这里就是阴影数据设定)
padding: 10px;
}
/* CSS container shadow */
</style>
</head>
<body>
<div id="shadow-container">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="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>