:: 設為首頁 :: 加到我的最愛 ::
2008 年 05 月 13 日 (星期二) 11:41
hkwebs.net
用戶名稱 >     密碼 >    
忘記密碼   會員注冊
 
公 司 列 表
網 頁 寄 存
主 機 租 用
主 機 托 管
電 郵 服 務
域 名 服 務
服 務 搜 尋
服 務 排 名
名 詞 解 釋
免 費 資 源
網 頁 教 學
下 載 區
討 論 區
Google
  Thunderbird
Mozilla
GameServer.hk 香港遊戲討論區。
電子咖啡室
香港傳遞訊息
LOVELAND
 
加入

hkwebs 網頁教學 使用 CSS 為圖片加上陰影

 
主題: 使用 CSS 為圖片加上陰影
工具: Internet Explorer 或 Mozilla
實例: 使用 CSS 為圖片加上陰影例

內容:

只須要簡單的 CSS,便可以令圖片加上陰影。
 


編碼:

CSS 設定:

style.css
  .wrap1 {
float: left;
width: auto;
background: url(/images/img/fuzzy_shadow.png) no-repeat bottom right;
}
.wrap2 {
background: url(/images/img/fuzzy_shadow1.png) no-repeat right top;
}
.wrap3 {
background: url(/images/img/fuzzy_shadow2.png) no-repeat left bottom;
padding: 0 6px 6px 0;
display: block;
}
.wrap1 img {
background-color: #fff;
color: #000;
border: 1px solid #999;
padding: 4px;
vertical-align: bottom;
}
請更改 "/images/img/" 的位置。

圖像設定:

<div class="wrap1"><div class="wrap2"><div class="wrap3"><img src="object.gif" /></div></div></div>
這是令圖像更改為陰影所需要的編碼。



步驟:

  1. 首先上載新的 CSS。
  2. 修改圖像碼。

下載:

使用 CSS 為圖片加上陰影實例
 


注意:

  • 圖象位置會受影響。

如有對以上教學有任何疑問,請到討論區發問。

 
Copyright © 2003-2004
hkwebs.net All Right Reserved.