HTML CSS邊框陰影的實現

本文轉載自查看原文 2013-08-24 16:19 14325 HTML5 & Javascript

一款用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>

效果圖

需要兩張圖片

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3文本陰影、邊框陰影 css隱藏input邊框陰影 css：css3（圓角邊框、盒子陰影、文字陰影）酷炫，用Html5/CSS實現文字陰影 CSS（五）- 背景與邊框 - 邊框圓角與陰影基礎用法 CSS實現文字陰影 CSS - 實現熒光邊框 css實現動態邊框純CSS3創建邊框陰影向外擴散的動畫特效 css3-邊框陰影漸變背景文本效果