div 边框阴影

本文介绍了一种使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值