hsuyo BLOG

參考 Royboy Weblog 的這篇文章，利用修改 CSS 讓圖片有陰影的效果，

Step1
到這邊下載想要的陰影樣式

Step2.
修改 CSS ，加入:

.shadow1,
.shadow2,
.shadow3 {display:inline-table}
.shadow1 {float:left;background:URL(路徑/shadow.gif) right bottom no-repeat}
.shadow2 {background:URL(路徑/corner_bl.gif) left bottom no-repeat}
.shadow3 {padding:0 6px 6px 0;background:URL(路徑/corner_tr.gif) right top no-repeat}
img.border{border-right:1px solid #999;border-bottom:1px solid #999;border-top:1px solid #ccc;border-left:1px solid #ccc}

可自行修改

Step3.
使用方法

<div class="shadow1"><div class="shadow2"><div class="shadow3"><img src="圖片路徑" class="border"></div></div></div>
<br style="clear: both;" />

完成範例:

Author: hsuyo @ 11:22 pm, 07/31/2004
Tags: css
Related Tags: No Tags
Category: 網頁調教. Responses are currently closed, but you can trackback from your own site.