【照片】如何利用CSS製作圖片陰影（參考Oui-Blog）

呈現的效果如下圖：

詳細做法如下：

I. 下載圖檔，併上傳至自己的網路空間(我是放在Google Page Creator)中：

fuzzy_shadow.png

fuzzy_shadow1.png

fuzzy_shadow2.png

II. 編輯style-sheet模板，並加入以下css控制碼：
.shadow {

float: left;

width: auto;

background: url(http://bangdoll2k.googlepages.com/fuzzy_shadow.png) no-repeat bottom right;

}

.shadow div {

background: url(http://bangdoll2k.googlepages.com/fuzzy_shadow1.png) no-repeat right top;

}


.shadow div a {

background: url(http://bangdoll2k.googlepages.com/fuzzy_shadow2.png) no-repeat left bottom;

padding: 0 6px 6px 0;

display: block;

}

.shadow img {

background-color: #fff;

color: #000;

border: 1px solid #999;


padding: 4px;

vertical-align: bottom;

}


III. 在html中想要出現圖片地方加上：
<div class="shadow"><div><a href="連結網址"><img src="圖片來源網址" /></a></div></div>

<br style="clear: both;" />

製作方法參考自Oui-Blog │如何利用CSS製作圖片陰影