CSS控制背景圖像平鋪實(shí)現(xiàn)邊框陰影效果
發(fā)布時(shí)間：2013-08-25 13:11:10 作者：佚名 
我要評(píng)論
我要評(píng)論CSS控制背景圖像平鋪，從而實(shí)現(xiàn)區(qū)域邊框陰影的效果，可貴之處是本代碼不管你需要陰影的區(qū)域是多大，它都能自動(dòng)適應(yīng)，個(gè)人感覺(jué)還不錯(cuò)，具體實(shí)現(xiàn)如下建議收藏下哦
一款用CSS控制背景圖像平鋪，從而實(shí)現(xiàn)區(qū)域邊框陰影的效果，雖然用到了圖片，但可貴之處是本代碼不管你需要陰影的區(qū)域是多大，它都能自動(dòng)適應(yīng)，因些還是很值得收藏一下的，兼容所有的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>
效果圖
復(fù)制代碼
代碼如下:<!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>
效果圖
相關(guān)文章
基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動(dòng)畫集合
這篇文章主要介紹了基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動(dòng)畫集合,需要的朋友可以參考下2019-05-09
這篇文章主要介紹了CSS 制作帶邊框背景色透明的消息框的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-03
css3 邊框、背景、文本效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了css3 邊框、背景、文本效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-21CSS3實(shí)現(xiàn)多背景模擬動(dòng)態(tài)邊框的效果
前幾天在工作的時(shí)候遇到一個(gè)問(wèn)題，項(xiàng)目需要實(shí)現(xiàn)一個(gè)效果，當(dāng)鼠標(biāo)移入一個(gè)元素的時(shí)候，元素出現(xiàn)一個(gè)動(dòng)態(tài)的邊框，通過(guò)網(wǎng)上查找資料看到有人推薦可以使用Css3來(lái)實(shí)現(xiàn)，后來(lái)試了2016-11-08css div 邊框陰影利用背景圖或內(nèi)外層div實(shí)現(xiàn)層次感覺(jué)陰影效果
在網(wǎng)頁(yè)布局中偶爾會(huì)用到div 邊框陰影做一些特殊效果本文介紹兩種實(shí)現(xiàn)方法:一種是利用內(nèi)外層的div邊框來(lái)實(shí)例層次感覺(jué)的css邊框陰影效果，另一種是利用了背景圖片再加內(nèi)外div2012-12-18css樣式div或li在ie6下背景平鋪及border邊框斷線解決技巧
css樣式div或li在ie6下背景平鋪或邊框斷線解決辦法2011-09-04- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：到現(xiàn)在為止,只有一些已經(jīng)工作的CSS3特性. 到現(xiàn)在為止，只有一些已經(jīng)工作的特性，他們中的一些如下: 圓角 從web2.0開始，開2009-04-02
本文通過(guò)代碼給大家介紹css背景和邊框標(biāo)簽的一些知識(shí)，通過(guò)相關(guān)屬性設(shè)置背景顏色，背景圖像，對(duì)css背景與邊框的相關(guān)知識(shí)感興趣的朋友一起看看吧2021-05-21
