网页阴影效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/master3003/article/details/84003524

本文介绍了一种使用CSS实现网页页面边框阴影的方法。通过创建多个叠加的div元素，并为每个元素设置不同透明度的背景颜色，最终达到阴影渐变的效果。此方法适用于早期浏览器版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于网页页面边框阴影的实现浏览次数：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>