替文字或圖片製作立體的陰影效果─網頁研習室【網頁製作系列報導】─智邦公益電子報
enews.url.com.tw · August 18,2016伍、更多解決 IE 不支援 box-shadow 辦法：
這裡我在網路上找到幾個可跨不同瀏覽器 Cross-browser 的 CSS3 box-shadow 運用資料，併製作成簡單易用的範例給你參考。
推薦網站與詳細範例介紹 Go 。
使用 CSS 產生純文字陰影效果，推薦網站與詳細範例介紹 Go 。
陸、用圖檔產生陰影效果：
除了使用純 CSS box-shadow 語法外，我們還可以加入自製陰影邊框圖檔，或者將陰影邊框圖檔溶入 CSS 語法內。
這裡我在網路上找到幾個不錯的實際案例資料，併製作成簡單易用的範例給你參考。
柒、線上 box-shadow 編輯工具：
我幫大家找到十幾個可以線上編輯的工具網站，讓少量使用者也可以快速運用取得。
線上 box-shadow 編輯工具及添加陰影相關軟體介紹 Go 。
捌、本篇報導參考資料來源：
本篇製作立體的陰影效果 - 國內外報導參考資料來源與值得參考網站。
製作立體的陰影效果值得參考網站 Go 。
玖、如何完整取得所有資料：
你想學習與取得這份完整報導資料嗎？你學習上有困難嗎？您想永久長期取得網頁研習室有關網頁製作教材嗎？
如果您想完整取得電子報等所有檔案資料，我們提供燒錄光碟片給您 Go 。
教材詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、第四期電子報、網頁圖窟。
為讓您學習不終斷，即日起推出凡參加教學會員或購買教材會員，可加選第四期電子報報導畢後補送完整教材一片！
特別聲明：本站教學使用軟體或檔案，著作權與版權均屬原創公司所有，屬完全免費性質，不含於教學 (材) 費用內。
拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。
壹、報導前言：
一般我們想要替文字或圖片製作立體的陰影效果，都會使用 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 。
