網站美工教學

第二篇
替文字或圖片製作立體的陰影效果

適合程度： 初學者 一般程度 進階者 以上均宜
壹、報導前言：
一般我們想要替文字或圖片製作立體的陰影效果，都會使用 PhotoShop、CorelDRAW、Painter 等美工繪圖軟體處理。
簡單一點只要幾個步驟就可以完成，複雜或想要特殊一點的效果，恐怕要十幾個步驟才能完成，基本上你要有此功力。
如果遇到大量的照片需要處理同樣的立體陰影效果，雖然可以使用批次功能，但仍然要花費許多時間學習與製作。
本篇報導特別為大家蒐集一些快速、簡單又方便的網頁語法，尤其適合美工不好的網友與需要使用大量圖片的網站。
使用網頁程式語法製作立體的陰影效果，最頭痛的問題當然就是瀏覽器相容問題，耽心部份無法顯示或顯示結果不一樣。
因此我很仔細深入的幫大家找到幾款，幾近適用各種不同瀏覽器語法或程式，製作成簡單範例，讓你學習與套用方便。
網頁研習室 - 電子報系列報導，就是長期免費的為大家整理與提供網路上常用的各種實用工具與學習特殊技巧的園地。
強烈建議想好網頁製作朋友，免費訂閱或購買本站所有教材資料，有系統完整學會 HTML 標籤，提昇你的網頁水準。
聲明：非本站付費教學學會員，站長因限於時間與工作，無法提供線上諮詢服務，有需要者請加入教學會員，謝謝支持。
如果你是初學者，建議你學習本篇報導之前，最好具備基本的 HTML 觀念及 CSS、JavaScript 等網頁程式運用。
感謝：本報導程式或技術資料，大都取自網路分享資源，其版權與著作權均為當事者所有，特此感謝你的努力與辛苦。

貳、認識區塊陰影 (CSS box-shadow)：
製作區塊陰影最常使用 CSS box-shadow 語法，用以達到盒狀(方塊)的投影效果，它是屬於 CSS3 標準，迄今發展還不算成熟。
以往我們會使用表格 (Table) 語法製作出方塊的 90 度直角效果，現在使用 CSS3 標準，就可以產生圓角 (Border Radius) 效果。
目前在尚未統一語法知之前，必須使用各自 CSS box-shadow 語法以支援各自不同的瀏覽器。
如陰影語法：Safari 與 Chrome 就要用 -webkit-box-shadow；而 Firefox3.5 便要使用 -moz-box-shadow。
如圓角語法：Firefox 使用 -moz-border-radius，Safari 與 Chrome 的 Webkit 引擎則要使用 -webkit-border-radius。
到目前為止 IE 8.0 瀏覽器仍然不支援 box-shadow 語法，下面第肆項我們會告訴你解決辦法。
在 W3C 對 CSS3 標準還沒完成統一前，想使用 CSS3 語法，又要支援所有瀏覽器，建議將這三種語法都寫進去比較保險。
本篇報導所有範例，我使用的測試瀏覽器與版本可能與你不同，請自己參考看看 Go 。

更多詳細介紹範例 Go 。


參、CSS box-shadow 可設的常用值：
Syntax：box-shadow: [x offset] [y offset] [blur radius] [spread radius] [color]
語法：box- shadow : 陰影類型 , X 軸位移 , Y 軸位移 , 陰影大小 , 陰影擴展 , 陰影顏色

詳細介紹說明 Go 。


肆、解決 IE 不支援 box-shadow 問題：
到目前為止 IE 8.0 瀏覽器仍然不支援 box-shadow 語法，但可用 filter:DropShadow() 達成類似的功能，但其顯示有些差異。

完成範例與詳細介紹 Go 。


伍、更多解決 IE 不支援 box-shadow 辦法：
這裡我在網路上找到幾個可跨不同瀏覽器 Cross-browser 的 CSS3 box-shadow 運用資料，併製作成簡單易用的範例給你參考。
推薦網站與詳細範例介紹 Go 。

使用 CSS 產生純文字陰影效果，推薦網站與詳細範例介紹 Go 。


陸、用圖檔產生陰影效果：
除了使用純 CSS box-shadow 語法外，我們還可以加入自製陰影邊框圖檔，或者將陰影邊框圖檔溶入 CSS 語法內。
這裡我在網路上找到幾個不錯的實際案例資料，併製作成簡單易用的範例給你參考。

完成範例與詳細介紹 Go 。
更多邊框範例介紹 Go 。


柒、線上 box-shadow 編輯工具：
我幫大家找到十幾個可以線上編輯的工具網站，讓少量使用者也可以快速運用取得。

線上 box-shadow 編輯工具及添加陰影相關軟體介紹 Go 。


捌、本篇報導參考資料來源：
本篇製作立體的陰影效果 - 國內外報導參考資料來源與值得參考網站。

製作立體的陰影效果值得參考網站 Go 。


玖、如何取得：

拾、結論與建議：