CSS高級技巧:陰影效果

2024-07-11 08:25:05

字體：大中小

來源：轉載

供稿：網友

上一篇CSS教程文章：CSS高級技巧:網頁布局CSS陰影效果 (Drop Shadows)
一點陰影可以給平板的設計增加縱深的感覺, 很多時候我們都是直接用PhotoShop直接制作帶陰影的圖片以供使用, 這里介紹的是一種不需要修改圖片, 而只需要用CSS完成的技巧.
原理:
給<img />標簽增加一個容器, 給容器設置一個大的陰影背景圖像, 然后把<img />利用負值外補丁進行偏移, 使陰影落在圖像外側以達到效果.

備用的陰影圖像 shadow.gif
HTML代碼如下:

<div class="image_shadow">
<img src="../images/origin_image.jpg" alt=""/>
</div>

CSS代碼如下:

.image_shadow{position:relative;float:left;clear:right;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;display:block;margin:-5px 5px 5px -5px;padding:3px;background:white;border:solid 1px #ccc;}

紅色代碼部分是為IE 6準備的, 不然...
Clagnut陰影:
Richard Rutter提供了一個類似的陰影方法, 他用的是相對定位來偏移圖像.
CSS代碼如下:

.image_shadow{float:left;line-height:0;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;left:-5px;top:-5px;padding:3px;background:white;border:solid 1px #ccc;}

上面的陰影都有點生硬(hard), 我們可以通過建立一個額外的div標簽, 再運用一個帶透明度的png蒙板來遮蓋陰影圖片的邊緣.

具有Alpha的陰影蒙板圖片 shadow_mask.png
HTML代碼如下:

<div class="image_shadow">
<div>
<img src="../images/origin_image.jpg" alt="" />
</div>
</div>

CSS代碼如下:

.image_shadow{float:left;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow div{float:left;padding:0 5px 5px 0;background:url(../images/shadow_mask.png) no-repeat left top;}
.image_shadow div img{padding:3px; background:white; border:solid 1px #ccc;}

效果如下: