css div 邊框陰影利用背景圖或內(nèi)外層div實(shí)現(xiàn)層次感覺(jué)陰影效果

發(fā)布時(shí)間：2012-12-18 14:24:03 作者：佚名

在網(wǎng)頁(yè)布局中偶爾會(huì)用到div 邊框陰影做一些特殊效果本文介紹兩種實(shí)現(xiàn)方法:一種是利用內(nèi)外層的div邊框來(lái)實(shí)例層次感覺(jué)的css邊框陰影效果，另一種是利用了背景圖片再加內(nèi)外div來(lái)實(shí)現(xiàn)的這種效果更漂亮，需要了解的朋友可以參考下

兩種實(shí)現(xiàn)方法一種是利用內(nèi)外層的div邊框來(lái)實(shí)例層次感覺(jué)的css邊框陰影效果，另一種是利用了背景圖片再加內(nèi)外div來(lái)實(shí)現(xiàn)的這種效果更漂亮。
簡(jiǎn)單一點(diǎn)的純css

復(fù)制代碼

代碼如下:

<head>
<metahttp-equiv="content-type"content="text/html;charset=gb2312"/>
<title>cssdiv邊框陰影</title>
<styletype="text/css">
body{padding:200px;}
div{border-width:1px;border-style:solid;padding:1px;}
.a{background-color:#f3f3f3;border-color:#fbfbfb;}
.b{background-color:#d8d8d8;border-color:#e8e8e8;}
.c{background-color:#fff;border-color:#bbb;height:100px;color：#ff0000;}
</style>
</head>
<body>
<divclass="a">
<divclass="b">
<divclass="c">邊框?yàn)殛幱靶Ч?lt;/div>
</div>
</div>
</body>
</html>

復(fù)雜一點(diǎn)的利用圖片背景

復(fù)制代碼

代碼如下:

<!doctypehtmlpublic"-//w3c//dtdxhtml1.0transitional//en""http://www.027eat.com/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<htmlxmlns="http://www.027eat.com/1999/xhtml">
<head>
<title>css邊框陰影</title>
<style>
.drops教程hadow2{
float:left;
clear:left;
background:url(http://www.6a8a.com/uploadfile/2011/0621/20110621015322996.png)no-repeatbottomright!important;
background:url(http://www.6a8a.com/uploadfile/2011/0621/20110621015329456.gif)no-repeatbottomright;
margin:10px010px10px!important;
margin:10px010px5px;
width:500px;
padding:0px;
}
.innerbox{
position:relative;
bottom:6px;
right:6px;
border:1pxsolid#999999;
padding:4px;
margin:0px0px0px0px;
}
.innerbox{
margin:0px0px-3px0px;
margin:0px0px0px0px;
}
.innerboxp{
font-size:14px;
margin:3px;
}
</style>
</head>
<body>
<divclass="dropshadow2"><divclass="innerbox"><h4>css陰影：</h4><p>這段邊框陰影效果怎么樣呢？</p></div></div>
</body>
</html>