^{<sub id="clbka"></sub>}

您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > css\s special-陰影

css\s special-陰影

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：230 更新時(shí)間：2009-09-16 11:47 參與評(píng)論

每個(gè)菜鳥(niǎo)都有一個(gè)成長(zhǎng)的過(guò)程，而我正是其中的一只菜鳥(niǎo)。N天前我應(yīng)某人的要求做一個(gè)帶陰影效果的圖，傻乎乎的我直接在ps里面加陰影，直接切圖了。當(dāng)時(shí)想起來(lái)還覺(jué)得挺快的嘛。今天決定不在使用那個(gè)不夠標(biāo)準(zhǔn)的方法了。假如有N張圖需要+陰影豈不是累死人了？呵呵，總結(jié)2種實(shí)現(xiàn)陰影效果的方法。
一.定位法
運(yùn)用到相對(duì)定位，使用簡(jiǎn)單的錯(cuò)位快速制作陰影效果。這里指的錯(cuò)位是指內(nèi)層id為in的div的相對(duì)錯(cuò)位，使得外層的灰色部分外露，有一種陰影的效果。但我覺(jué)得這種陰影還是有點(diǎn)生硬，過(guò)渡的效果不明顯，可能還要優(yōu)化改進(jìn)，可以嵌套多幾層再做多次顏色的過(guò)渡。
xhtml部分：
<div class="out">
<div class="in"><img src="test.jpg" width="853" height="1280" alt=""/></div>
</div>
css部分：

.out{
width:860px;/*比原圖大點(diǎn)，跟錯(cuò)位量有點(diǎn)關(guān)*/
background:#ccc;/*陰影顏色*/
margin:10px auto;
}

.in{
position:relative;
top:-5px;/*向上錯(cuò)位5px*/
left:-5px;/*向左錯(cuò)位5px*/
padding:2px;
background:#fff;
border:1px solid #999;
}
二.洋蔥皮方法
這個(gè)方法為何叫洋蔥皮呢？呵呵，因?yàn)樗脑硎且粚右粚拥奶砑舆^(guò)渡顏色，跟第一種方法我提到的優(yōu)化一樣。留意過(guò)渡顏色的設(shè)置。
xhtml部分：
<div class="out">
<div class="in2">
<div class="in"><img src="test.jpg"/></div>
</div>
</div>
css部分：
.out{
float:left;
border:2px solid #ddd;/*1級(jí)過(guò)渡色*/
background:#bbb;/*2級(jí)過(guò)渡色*/
}

.in2{
position:relative;
margin:2px;
border:2px solid #999;/*3級(jí)過(guò)渡色*/
background:#777;/*4級(jí)過(guò)渡色*/
}

.in{
position:relative;
padding:2px;
border:2px solid #555;/*5級(jí)過(guò)渡色*/
background:#fff;/*6級(jí)過(guò)渡色*/
}
其實(shí)還有一種叫浮動(dòng)法，這里我就不寫了。一直有個(gè)問(wèn)題困擾著我，我以前做陰影效果的方法除了部夠標(biāo)準(zhǔn)還有什么問(wèn)題不？是否還有一些我自己沒(méi)意識(shí)的問(wèn)題呢？

Tag標(biāo)簽: css's special 陰影