| 一勞永逸! 完美圖片陰影語法! |
 頗值得推介的原因，在於此語法的便利性， 在寫入樣式表之後， 日後只需要加上簡單的語法就可以顯示陰影的效果， 而且也不需要在因圖片尺寸而調整.... 首先，挑選或製作所需的陰影圖檔，分別為 shadow.gif ; corner_bl.gif ; corner_tr.gif 共三張!! 選擇並下載陰影圖檔! 然後將三張圖檔上傳，並將下列語法寫入您的 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} 好啦! 日後呢! 只要用下列的語法放圖片就好啦!! <div class="shadow1"><div class="shadow2"><div class="shadow3"><img src="照片圖檔路徑" class="border"></div></div></div>  PS: 使用此方式後，圖片大小大致上都不需另行調整，但關鍵還是在於那張 shadow.gif 得尺寸，也就是說只要小於 shadow.gif 的照片圖檔都不需要另外調整的! |
| 你好~今天不小心逛到你的網頁 很實用的教學 對於還是新手的我 我學得很開心！ 不過，我有個想法，想將拍立得照片也加上陰影 我看不懂，要加上的三張圖檔，是怎樣子的圖檔呢? |
| 黃小華 ,2006/09/28 17:51:17 |
| 請問~我是用blog的新手~~所謂放置在css樣式表裏~~是指?? 我用的是樂多~我把它放在可以改我頁面樣式的原始碼最後~是這樣ㄇ? 其他就照著您的方法做~~~但~~好像沒有動靜~我是用gif檔的小圖做試驗 但是只呈現一般圖~沒有陰影耶??? 不知道錯在哪? |
| 蘇jovi ,2006/09/13 17:14:36 |
| 哈....雖然這篇已經很久了 ^^" 請問我要怎樣將照片置中呀? 還有我照片放入文章後怎麼跳行呀 >"< 詳情情看..... http://www.wretch.cc/blog/irelandofelf&article_id=2432247 |
| http://www.wretch.cc/blog/irelandofelf La Memoria Piu Breve ,2006/08/29 17:10:16 |
| hello Royboy, 您的網頁太讚了 本來不太會用這個陰影語法跟拍立得像框, 結果請我弟check 一下就弄出來了. (果然還是唸資工的利害) 在此跟您道謝啦! 不然以我沒有photoshop這種軟體的人 blog中的photo會很單調 tks a lot |
| http://www.wretch.cc/blog/aprapril Spring Roll ,2006/08/20 00:32:28 |
| Hello~ 我想把我無名相簿的每張相片都加上陰影(包括封面),可是不知道要怎麼加耶>< 如果行的通,教教我一下... THANK^^ |
| Kd ,2006/06/18 09:07:41 |
| hi chapelle, 我看了! 是因為陰影的圖片是以白色底而設計喔! 所以妳如果妳將底色換成白色就可啦! 不然就是改陰影圖檔囉! |
| http://roy.nicetypo.com 羅小伊 ,2005/09/17 00:44:22 |
| Hello Roy, 我試了一下,可是出現的陰影很不自然,可否請你幫我看一下哪裡出問題呢? http://www.wretch.cc/blog/chapelle |
| http://www.wretch.cc/blog/chapelle chapelle ,2005/08/24 15:50:43 |
| Dear Evelyn, 當然是好呀! 那有什麼問題! 感謝喔! hight.. |
| http://roy.nicetypo.com 羅小伊 ,2005/05/05 07:54:28 |
| 你好 我是從艾瑪那兒連結過來的 跟你打聲招呼先 你的語法教學真的很棒耶 那...請問可以將你這邊加入我網誌的連結嗎 |
| Evelyn ,2005/04/30 02:06:17 |
| Dear iopvot, 別客氣囉! 加油... 成功後別忘了通知一下ㄋㄟ! 想看看囉! :p |
| http://roy.nicetypo.com 羅小伊 ,2005/04/28 16:53:26 |
| 甘溫蛤 正在試當中 to be continue |
| http://無名 iopvot ,2005/04/22 09:48:31 |
| Dear 寧ㄦ, 用 dreamwaver 喔! 那真有得套用了.... U_U||| 恕我對 dreamwaver 怎樣弄不是粉瞭耶! Sorry 囉! |
| http://roy.nicetypo.com Royboy ,2005/01/18 00:50:21 |
| 那我如果用dreamwaver不要每一頁都套用 那有沒有可以用的語法呢 |
| 寧ㄦ ,2005/01/13 00:02:38 |
| Dear kirai, 加妳的連結....當然好呀! 謝囉! 還是那句話...能幫上忙高興都來不及了.... 過獎囉! 加油!! |
| http://roy.nicetypo.com Royboy ,2004/12/27 11:36:54 |
| 你的文章‵ ‵ 對於我的網誌有好多的幫助唷‵ ‵ 你超厲害的！！ 可以把你加入連結嗎‵ ‵ 這樣我就可以常常來這邊光顧‵ ‵ 跟多多學習ㄋ‵ ‵ |
| http://www.wretch.cc/blog/kirai ｋｉｒａｉ ,2004/12/25 02:22:07 |
| Dear carole, 看過了!~大致上都沒錯ㄋㄟ! 只剩圖檔的問題囉! 沒用過 blogspot 的,不太清楚說... 妳試試將那三張圖檔換個空間放看看囉! |
| http://roy.nicetypo.com Royboy ,2004/11/04 23:14:34 |
| http://carolebaby.blogspot.com/ 不知道是不是因為我的照片比shadow大所以都沒有辦法呈現，還是怎麼了呢？ （你之前提供的.shadow1 .shadow2 .shadow3 釋放在body前面嗎？）-->還是我放錯位置了呢？ 你可以幫我看一下嗎？謝謝你 |
| http://carolebaby.blogspot.com/ carole ,2004/11/04 18:17:50 |
| Dear Jewel, 兩種效果如果要合併一起...那我改天在寫一篇好了...^+++^ 這兩個我想...就先選一個用先囉! 等我喔!! Dear nini, 嗯....那個....陰影的圖檔...好像....放錯位置了耶! ^_^ 妳在 CHECK 一遍囉! |
| http://roy.nicetypo.com Royboy ,2004/10/24 05:04:00 |
| 怪怪滴~~ 可以幫我看一下嗎~~ tks~ |
| http://www.wretch.cc/blog/ninisu&article_id=1073029 nini ,2004/10/21 17:44:27 |
| Hello，您好 您的網站真的是讓我受益良多 我有個問題想要請教 當我把您寫的完美圖片陰影語法及設計自己的圖片框語法同時貼到CSS樣式表中 原來有的圖片陰影就沒辦法顯示出來ex http://www.wretch.cc/blog/jewelH&article_id=1084610 在沒有加入設計自己的圖片框語法時，圖片及陰影是可以顯示的 問題是出在哪呢? 謝謝! |
| http://www.wretch.cc/blog/jewelH Jewel ,2004/10/14 13:01:44 |
| Dear chenju, 妳可以連絡一下無名的站長看看喔! 這我也幫不上忙囉! ^_^|| |
| http://roy.nicetypo.com Royboy ,2004/08/30 22:24:57 |
| Dear chenju, 我看不到妳的站台耶.... 或許妳可以先試著做...在留著讓我看看.. 這樣會比較快找出原因的喔! ^_^ Dear amanda, 目前看來是只有圖檔連結不出的問題, 只要換個空間放圖檔就應該可以了..試試囉!! |
| http://roy.nicetypo.com Royboy ,2004/08/30 01:15:03 |
| hi~~Royboy 謝謝你回答我的問題, 那請問我該如何做, 才能將我要加的圖片顯示出來? |
| http://www.wretch.twbbs.org/blog/amandalin8 amanda ,2004/08/29 21:02:58 |
| 您好 我是新手,第一次在這留言,這真是一個超讚的網誌 不過我一直無法做出"陰影" 我的做法是直接將您上頭的語法複製到CSS式樣表中,再改路徑,但一直做不出來.. |
| http://www.wretch.twbbs.org/blog/chenju chenju ,2004/08/28 11:21:40 |
| Dear amanda, 妳的 PCHome 相簿好像不支援妳"連外"喔! 這是正常的喔! 他們會擔心頻寬佔用的問題喔! |
| http://roy.nicetypo.com Royboy ,2004/08/26 00:16:23 |
| 不好意思我是新手, 我發現我連在新增文章中貼上照片都貼不上去~~>_<~~ 可以告訴我問題出在哪嗎? 我是使用PC HOME的相簿, 是不是不能直接連相簿的照片呢? <img src="http://photo.pchome.com.tw/s05/amandalin89/book8/p35.jpg" align="left"> |
| http://www.wretch.twbbs.org/blog/amandalin8 amanda ,2004/08/25 13:01:03 |
| 哈，我们涉及的范围似乎很相近诶，交换链接可否？ myblog : http://www.arshit.com/blog |
| http://www.arshit.com jouke ,2004/08/19 11:37:53 |
| 謝謝! 我終於成功了 抱歉因為還是個菜鳥所以問題多多 |
| http://www.wretch.twbbs.org/blog/withyu 南 ,2004/08/19 03:49:59 |
| Dear 南, 妳的圖好像還是有問題喔! 在Check 一次吧! 而且應該是 GIF 檔的說... 怎會變成 JPG 了耶!...^_^|| |
| http://roy.nicetypo.com Royboy ,2004/08/19 00:21:30 |
| 嗯 不好意思 我途徑改了 可是還是怪怪的 好像太大了 |
| http://www.wretch.twbbs.org/blog/withyu 南 ,2004/08/18 21:00:03 |
| Dear 南, 我看到妳的CSS語法那的圖片路徑好像是無效的耶! 妳可以在 Check 看看囉! 如下: http://w.pic.wretch.twbbs.org/./photos/w/withyu/2/1092809259.jpg/shadow.gif <----找不到這圖耶! 所以也就不行囉! |
| http://roy.nicetypo.com Royboy ,2004/08/18 17:20:01 |
| 第一次來, 我一直試不成功,請問是什麼原因呢 |
| http://www.wretch.twbbs.org/blog/withyu 南 ,2004/08/18 15:01:05 |
| Dear 44, 謝~~~謝~~~44~~~的~~~關~~~心~~~! 有點小忙啦! 真是對大家不好意思! 我會趕進度的....:p |
| http://roy.nicetypo.com 羅伊小爹 ,2004/07/26 18:03:39 |
| 看來羅伊真是忙壞了呢 許久沒看到你出現或貼新文 |
| 44 ,2004/07/26 13:55:14 |
| Dear Cassidy, 是的! 我會趕快寫新的啦! :p 至於把 CSS 語法秀在網頁上..... 我是用類似 Dearmweaver 等這類的所見即所得軟體去轉換的說....因為比較快啦! :p 一般這類軟體都會有所見即所得與原始碼編輯模式,然後將語法貼入軟體的所見即所得模式後, 在看原始碼就會轉好了..... 就這樣囉!~^_^ |
| http://roy.nicetypo.com 羅伊小爹 ,2004/07/25 01:03:07 |
| 我來看VIVI了 老爹還不快寫新的文章 另外我要問，怎麼把css的語法寫在網頁上阿 我一寫就變成圖片了>.< |
| http://cassidy.niceytpo.com Cassidy ,2004/07/23 23:37:11 |
| Dear Hugin, 很謝謝ㄋㄟ! 怎麼會不當呢! 高興都來不及了~^_^ 謝囉! 儘管拿囉! ^_^b |
| http://roy.nicetypo.com Royboy ,2004/07/23 23:02:30 |
| dear roy 向您借了幾篇有關CSS文章link到我的小站台上,若有不當請告知! thx |
| http://hugins.idv.st hugin ,2004/07/23 17:21:51 |
| Dear BigVIVI, 說真的! 最近真是忙了點說! :P 找時間我會在去妳那鬧一下的.... |
| http://roy.nicetypo.com Royboy ,2004/07/14 02:04:13 |
| 老師好~ 好久沒來"偷師"了 這回來看看老師要教我們啥 嘿嘿~有空要試看看說 |
| http://www.vipon.uuu.to 藍魚 ,2004/07/09 19:54:34 |
| Dear 阿民, 那下回你可得插一嘴喔! :p 拜託啦!..... |
| http://roy.nicetypo.com Royboy ,2004/07/08 23:01:35 |
| 這篇我又差不上嘴了U_U 打個招呼吧! |
| http://leonli.typepad.com 阿民 ,2004/07/07 20:35:55 |
| Dear 阿妮奇, 恭喜囉! 利害利害! ^_^b Dear Ring, 謝謝誇讚ㄋㄟ ! 超高興的..... Dear nora, 盡量囉! 人家還稱不上老師啦! 過獎啦!!!!! |
| http://roy.nicetypo.com 羅伊小爹 ,2004/07/07 18:28:02 |
| 讚讚讚！！又學到新東西哩^^ 感謝感謝呢.. 趕快學回去用用啦..呵呵^^ ~~謝謝老師~~ |
| http://blog.elixus.org/nora/ nora ,2004/07/06 22:47:12 |
| hihi 我從喬依蘇那裡轉檯來的，正好看到你的新文章，馬上學了起來，真是超好用呢，謝謝嚕 ^^ |
| http://www.armake.com Ring ,2004/07/06 11:16:09 |
| 謝謝ROY 我成功做出來了~YA ^^y |
| http://blog.forlady.net 阿妮奇 ,2004/07/04 20:28:41 |
| Dear emily, ^__^ 反正我也樂得被人虧...... |
| http://roy.nicetypo.com 羅伊小爹 ,2004/07/04 01:52:57 |
| 知道你忙, 只是我們這些忠實讀者每天都嗷嗷待哺地在等 roy 小爹餵文章嘛~ 哇哈哈, 拍謝啦, 借虧一下啦! ^0^ |
| http://www.honli.co.uk/emily/ emily ,2004/07/04 01:16:50 |
| Dear ㄚ妮奇, 如果使用了 Vspace ,是會影響到這個 CSS 樣式的說! 如果妳想調寬圖片的上下左右外距,其實呢! 只要在 .shadow1 {.... 裡面在加上 margin: 0 5px 5px 0; 就可以了! (記得先用 ; 分隔在加上喔!) 上述的那四個數字,分別代表的是 上,右,下,左 的外距喔! 不難不難啦! 人家偶也是奉命學習的,學了之後真的覺得很有彈性且可控制的更多了呢!! 加油........! |
| http://roy.nicetypo.com 羅伊小爹 ,2004/07/03 21:07:56 |
| 剛特別來玩看這個效果，想問喔。 vspace設定可以併用嗎？ㄚ要寫在哪兒呢？ 特來請ROY幫忙解惑說。這CSS是個好難的東西喔。 |
| http://blog.forlady.net 阿妮奇 ,2004/07/03 19:02:46 |
| Dear KCD, ㄚ! 人家也都是用 Reader 在看嘛!~ :p 有啦! 看到了啦! ^++++^ Dear charlie, 應該不是吧! 只是用記事本給妳才不會有任何問題啦! 有的系統會自己加上換行符號什麼的,這樣妳一貼上去就會......失敗!! 好了就 OK 囉! :p Dear 愛瑪, 哈...被我搶先一步囉 ! ^++++^ 妳也寫嘛! 說不定妳寫的人家比較看的懂呢! Dear emily, 妳虧我! >"< 還 Cache 勒!~真有妳的.... 人家前些日子比較忙嘛! 包函啦!! :p Dear 阿妮奇, 看到妳來了好高興.....^__^ 因為忙了些,所以都一直沒上新的! 久等囉! :p |
| http://roy.nicetypo.com 羅伊小爹 ,2004/07/03 17:29:42 |
| 新文章耶。等好久。 這個很棒說，沒有PS時就可以用說。 |
| http://blog.forlady.net 阿妮奇 ,2004/07/03 00:31:41 |
| 喔耶! 終於等到你ㄉ新文章啦! 每天來都在想說:"這是我瀏覽器ㄉ cache 嗎?!" Roy小爹又有新花招啦~ |
| http://www.honli.co.uk/emily/ emily ,2004/07/02 20:21:49 |
| 太好了，ROY寫了這篇 我本來週五晚上要寫的 現在這邊已經寫了 就直接連結好了：P |
| http://26.to/webblog amarylliss ,2004/07/02 13:59:00 |
| 感恩~大德 終於...成功了 請問是不是只能在一般編輯器下才能貼的出來 如果使用進階編輯器就不行?? |
| http://www.wretch.twbbs.org/blog/charlielin 查莉 ,2004/07/01 23:57:45 |
| Roy我msn換帳號喔... 快去我的Type看一下 =) |
| http://leonli.typepad.com 阿民 ,2004/07/01 21:40:59 |
| 我昨天留言的時候就已經用了 你都不關心我的網誌 |
| Cassidy ,2004/07/01 16:42:09 |
| 問題很大條~~ Dear Roy 我在無名bbs登錄的e-mail明明是yahoo的,but為何你寄給我的信是寄到無名bbs咧??^^a...你是點我站上那個連結信箱嘛!我該怎麼改呢? 因為我到bbs上收,都是一堆ABCD完全不是中文 一一a 不好意思,可以麻煩你再寄一次嗎??拍...拍謝吶 |
| 查莉 ,2004/07/01 14:54:52 |
| Dear KCD, 對吧! 我就說嘛! :p 快啦! 快啦! 超想看妳用看看的! |
| http://roy.nicetypo.com Royboy ,2004/07/01 14:01:05 |
| 沒錯，你還記得喔 好高興喔^___^ |
| Cassidy ,2004/07/01 13:37:24 |
| Dear Cassidy, 如果我沒記錯! 這好像是妳想要的.... 就是找來給妳的啦! ^+++++++^ Dear 查莉, 別急別急! 我又不會跑不見....:p 慢慢來啦! Dear 夾心妞, 人家我也是ㄚ! 就是文章進貨量也不太夠... 所以要趕快! 妳快一點啦! :p |
| http://roy.nicetypo.com Royboy ,2004/07/01 12:42:42 |
| 啥米 又有新玩意啦 羅伊小爹 那個拍立得還沒玩膩咧 我看我的文章進貨量 要再積極一點 不然都跟不上你的腳步啦 |
| http://www.honli.co.uk/catherine/ 夾心妞 ,2004/07/01 12:07:13 |
| 夭....夭瘦 我連拍立得相框都還喬不定 羅伊又有新鮮貨 哦買尬ing |
| http://www.wretch.twbbs.org/blog/charlielin 查莉 ,2004/07/01 00:13:24 |
| 蛤，還要三個shadow喔 不過這樣對我這個不用ps的人來說是方便太多啦 |
| http://cassidy.niceytpo.com Cassidy ,2004/06/30 21:22:19 |
