支持FireFox的DIV阴影

最新推荐文章于 2025-11-29 19:52:46 发布

转载最新推荐文章于 2025-11-29 19:52:46 发布 · 1.2k 阅读

文章标签：

#firefox #div #filter #浏览器

DIV+CSS 专栏收录该内容

8 篇文章

订阅专栏

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

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>