用CSS模拟块的阴影效果-我的知识库

在对于块的阴影效果，大家在平时的设计中大概一般都使用图片来解决，Blank也是如此，那大家是否试想过用CSS来模拟呢？

一般的阴影效果为3px，位置处于右侧（right）和下侧（bottom），简单的解决办法可以使用对外面的div使用border属性，即定义：

border-right:3px solid #f1f1f1;border-bottom:3px solid #f1f1f1;

这个方法：简单明了，代码也非常简洁，但缺点是：只是粗略的模拟，离理想的状态有点距离。

那我们下面来更理想的模拟，为了达到更理想的效果，3px通过3个层来模拟，每个层用不同的灰色由深至浅，里面的最深，外面的最浅，他们的位置我们选用相对位置来实现（position: relative;）。

CSS部分：

#shadow{
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}

#shadow .shadow2,
#shadow .shadow3,
#shadow .content {
position: relative;
left: -1px;
top: -1px;
}
#shadow .shadow1 {
background: #F1F0F1;
}
#shadow .shadow2 {
background: #DBDADB;
}
#shadow .shadow3 {
background: #B8B6B8;
}
#shadow .content {
background: #ffffff;
border: 1px solid #848284;
padding: 12px;
}

XHTML部分：

<div id="shadow">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="content">
飞飞爱赜赜！
</div>
</div>
</div>
</div>
</div>

演示地址：http://www.planabc.net/demo/shadow.html

我的知识库

知识等于力量

文章来源:http://www.planabc.net/article.asp?id=84

Tags: css css

2007-1-30 0:47:06 | 编辑