CSS Decorative Gallery

個別詳細介紹作者網站上 12 種範例

01.簡單的裝飾外框(Simple Gallery)：讓我們從上述的技術，開始運用它來創建一個裝飾外框圖片庫。

02.迷你圖標 (Mini Icons)：這個例子告訴你如何將圖示定位在每一張不同的圖片上。

03.圖片與文字 (Photo With Text)：此範例告訴你如何使用一個 EM 標籤來達到圖片與文字的結合。。

04.彈出式文字 (Popup Text)：使用同上的 EM 標籤，利用滑鼠移到連結圖片上方，可顯示加上文字外框的效果。

05.迷你紙夾 (Mini Paper Clip)：運用上述要領，加上迴紋針效果的紙張夾圖框，你也可以自己製作一個來試試。

06.Cork 怖告欄 (Cork Board Gallery)：使用一張 Cork 怖告欄底圖，然後用一張透明貼紙背景圖框，組合出類似大型怖告欄效果。

07.Cork 怖告欄 + 膠帶 (Cork Board With Masking Tape)：使用同上手法，只是更換一張不一樣的透明貼紙背景圖框，產生不一樣效果。

08.藝術黑框畫廊 (Art Gallery - Black Frame)：其實就是使用一個黑色邊框，加上簡單文字描述，達成這個特殊效果。

09.藝術金框畫廊 (Art Gallery - Gold Frame)：就是將黑色邊框換成一個金色畫框，將文字描述移到畫框底下，造成這個特殊效果。

10.潑墨水彩 (Grungy Watercolor)：做法其實都是一樣，只是將金色框畫框換成波墨水彩的邊框，注意置頂的花邊底圖效果喔。

11.光面風格 (Glossy Style )：如果不仔細看，你可能看不出有何效果，其實就是在底部加個陰影，左上角產生半透明的玻璃效果。

12.木板怖告欄 (Wood Panel Gallery)：這個範例只是將上面 06. 及 07. 兩個範例效果，改變一下而已，讓你知道你也可以這樣使用。

作者的結語：正如你可以看到，這個 CSS 技巧是非常靈活：因此，有創意！隨意納入本教程創建自己的圖形圖像和 CSS 樣式。

本報導內容或資料，因限人力、時間，非教學會員，不接受任何使用上的教學與指導，敬請見諒。

如果你喜歡這篇辛苦蒐集整理出來的報導資料，歡迎原文轉載及註明出處，請勿直接盜用，謝謝你的合作。

如果你願意於貴站或部落格中介紹本站，歡迎使用複製網頁研習室連結語法，再次感謝你的支持與愛護。