萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS控制背景圖像平鋪實現邊框陰影效果
CSS控制背景圖像平鋪實現邊框陰影效果
一款用CSS控制背景圖像平鋪，從而實現區域邊框陰影的效果，雖然用到了圖片，但可貴之處是本代碼不管你需要陰影的區域是多大，它都能自動適應，因些還是很值得收藏一下的，兼容所有的IE浏覽器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS邊框陰影</title>
<style>
.dropshadow2{
float:left;
clear:left;
background: url(/jscss/demoimg/200903/shadowAlpha.png) no-repeat bottom right !important;
background: url(/jscss/demoimg/200903/shadow.gif) no-repeat bottom right;
margin: 10px 0 10px 10px !important;
margin: 10px 0 10px 5px;
width: 360px;
padding: 0px;
}
.innerbox{
position:relative;
bottom:6px;
right: 6px;
border: 1px solid #999999;
padding:4px;
margin: 0px 0px 0px 0px;
}
.innerbox{
/* IE5 hack */
margin: 0px 0px -3px 0px;
margin: 0px 0px 0px 0px;
}
.innerbox p{
font-size:14px;
margin: 3px;
}
</style>
</head>
<body>
<div class="dropshadow2"><div class="innerbox"><h4>CSS陰影：</h4> <p>這段邊框陰影效果怎麼樣呢？</p></div></div>
</body>
</html>
效果圖
DivCSS教程排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved