支持FireFox的DIV阴影

最新推荐文章于 2025-08-06 16:32:37 发布

水墨熊猫

最新推荐文章于 2025-08-06 16:32:37 发布

阅读量1.2k

点赞数

分类专栏： DIV+CSS 文章标签： firefox div filter 浏览器

DIV+CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用两个层来创建DIV阴影效果的方法。通过将一个层作为背景并进行位移，可以实现简洁且兼容多种浏览器的阴影效果。适用于前端开发人员学习。

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

DIV Shadow

简单而实用的DIV阴影效果代码O(∩_∩)O

代码转载自：http://www.03ds.com/jackie/article.asp?id=47 作者：jackie

主要思路：建立两个层，一个放内容的，一个当背景，两个层的大小相同，只是底部那个层位移，并底色为阴影色～
这种方法支持FireFox，如果用Filter有些浏览器是不支持D～

  
 <style type="text/css">
*{
font-family:Tahoma;
font-size:12px;
color:#333;
}
.TipsGob{/*阴影层*/
position:relative;/*相对位置*/
background:#ccc;
display:block;
width:300px;
}
.TipsBody{/*内容层*/
border:solid 1px #999;
top:-2px;left:-2px;
background:#ffc;
position:relative;
display:block;
padding:10px;
}
</style>
<div class="TipsGob">
<div class="TipsBody">
<h3>DIV Shadow</h3>
<p>This code is for learning.</p>
<p>powered by jackie</p>
</div>
</div>