css div 邊框陰影利用背景圖或內外層div實現層次感覺陰影效果

2024-07-11 08:29:17

字體：大中小

來源：轉載

供稿：網友

兩種實現方法一種是利用內外層的div邊框來實例層次感覺的css邊框陰影效果，另一種是利用了背景圖片再加內外div來實現的這種效果更漂亮。
簡單一點的純css

復制代碼

代碼如下:
<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">邊框為陰影效果</div>
</div>
</div>
</body>
</html>

復雜一點的利用圖片背景

復制代碼

代碼如下:
<!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>

上一篇：css3實現背景顏色漸變讓圖片不再是唯一的實現方式

下一篇：css控制圖片按等比例縮放實例兼容IE6/IE7/火狐/谷歌