给DIV层加阴影

五月 6th, 2011 by yangyao | Filed under 技术文章.

loney tree的主题有一个漂亮的阴影效果,在内容层的两侧有一层淡淡的阴影,这样的效果是怎么做到的呢?

其实其中的原理很简单。只需要做两个层一个当作阴影层就行。不许要滤镜什么的。

代码如下:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> yangyao.6te.net </TITLE>

<style>

#shadow .shadow1,
#shadow .content {
position: relative;
left: -5px;
bottom: -5px;
}
/*两个层相对定位*/
/*右边和上边5像素的差距显现阴影的感觉*/

/*建立了连个层*/
#shadow .shadow1 {
background: black;
}
/*阴影层颜色为黑色*/
#shadow .content {
background: #ffffff;
border: 1px solid #848284;
padding: 12px;
}
/*内容层背景为白色*/
</style>
</HEAD>

<BODY>

<div id=”shadow”>

<div>
<div>
china party

</div>
</div>
</div>

</BODY>
</HTML>

效果是.

china party

随机日志

Comments are closed.

回到 顶部 ↑
Free Web Hosting