用 CSS 實現的陰影製作效果

原文出自：A List Apart 作者：Sergio Villarreal
中文翻譯：onestab [2004.02.28]

“…假如有一種技術，用 CSS 對任意區塊層級元素靈活地添加陰影，而且能隨著內容的大小自動擴充，還要適用於大多數流行的瀏覽器，那該有多好！不信嗎？告訴您，只需寫幾行代碼就能做到。”

陰影製作效果成了平面設計的一個套路，平面設計師把它當作瑞士軍刀的起子，隨處使用，儘管招致不少非議，卻一直廣受歡迎。雖然用影像編輯軟體也能實現陰影製作效果，但在Web設計快速發展的今天，適應性和易用性是大勢所趨，這種以固定背景效果製作出的靜態圖片很難有良好的適應性。

假如有一種技術，用 CSS 對任意區塊層級元素靈活地添加陰影，而且能隨著內容的大小自動擴充，還要適用於大多數流行的瀏覽器，那該有多好！不信嗎？告訴您，只需寫幾行代碼就能做到。

是不是很有意思？先別急，這可不是我們的發明，我們只不過對此作了改進。這個技術是由著名的 1976 design 上的 Dunstan Orchard （向 Dunstan 脫帽致敬）構思出來的，並且作了示範。我們覺得這個方法簡潔實用，但深入研究之後，發現還有改進的餘地。

這裡是它的工作原理：先用映像軟體製作一幅背景圖片，圖片上只有陰影，不能有可見的邊界（一種簡便的方法是對空白的選擇地區應用某種效果）。這個圖片要能夠覆蓋將要修飾的最大元素，實踐當中，800 x 600 一般就足夠了。將它儲存為GIF圖片，記住一定要在背景顏色之上應用效果，此外再把它另存新檔完全透明的PNG圖片（即沒有背景色）。這是為了根據瀏覽器的能力區別對待[譯註：即讓支援透明 PNG 圖片的瀏覽器使用PNG，IE 使用GIF。]。這裡是將要用到的 GIF 檔案以及 PNG 檔案。

 

我們先從如何為圖片添加陰影開始，然後再擴充到其他區塊層級元素。為了直觀起見，我們把這個 class 命名為 img-shadow，我們先用這隻可愛的小貓作個實驗：

相應的代碼（只需額外增加一個 div ）：

<div class="img-shadow"><img src="cat.jpg" alt="test"/></div>

示範了我們所用到的技術：

 

 

首先，我們用先前準備的陰影圖片作為該 div 的背景。

background: url(shadow.gif) no-repeat bottom right;

然後，我們將圖片的左邊距和上邊距設為負值，使它“投下”陰影，陰影的寬度為 6 個像素，也就代碼中的數字：

margin: -6px 6px 6px -6px;

為避免指定該 div 的大小，我們將它浮動起來。（否則它將佔據全部可用的水平空間。）

還記得前面我們說過，要讓好的瀏覽器顯示好的陰影製作效果嗎？訣竅在這行代碼：

background: url(shadowAlpha.png) no-repeat right bottom !important;

這裡的“!important”表示此處指定的樣式的優先順序高於同元素上的普通樣式聲明（參見 標準），對透明 PNG 缺乏內在支援的所有版本的 Internet Explorer 剛好也不支援“!importan”。通過互相矛盾的兩次聲明，我們得到了期望的結果（IE 用的是第二個，而大多數瀏覽器會採用第一個）。最終的結果是這樣的：當需要改變背景顏色時，支援 PNG 的瀏覽器顯示出的陰影製作效果非常完美。而在可憐的 IE 中，陰影還是它原來的顏色。

你可能會問，為什麼要這樣做？答案是可以一箭雙鵰。

• 我們能夠: 不費吹灰之力就可以自動地讓進階的瀏覽器發揮它的最好效果。
• 它能自我修複: 如果（隨Longhorn而來的）新版 Internet Explorer 支援這兩個標準，我們無須進行修補，仍然能夠獲得精確、完全透明的陰影。

最終的 CSS 代碼是這樣的：

.img-shadow {float:left;background: url(shadowAlpha.png) no-repeat bottom right !important;background: url(shadow.gif) no-repeat bottom right;margin: 10px 0 0 10px !important;margin: 10px 0 0 5px;}.img-shadow img {display: block;position: relative;background-color: #fff;border: 1px solid #a9a9a9;margin: -6px 6px 6px -6px;padding: 4px;}

為了補償 IE 浮動模型的錯誤，所以上面代碼中的 margin 有些差異，而最後一行的 padding 將圖片框裝扮得更加漂亮，可惜在 IE 5.0 和 5.5 中不起作用，不過陰影製作效果仍然存在。

在符合標準的瀏覽器中，陰影和背景無縫融合在一起。在 IE 中，除非你把陰影和背景設為同一顏色，否則陰影和背景的過渡就顯得比較生硬。這裡就是最終效果：[譯註：請在不同的瀏覽器中觀看效果。]

 

 

接下來讓我們為一段文字加上陰影製作效果。

一段文字只不過是一個區塊元素，按理說上面的技術應該同樣適用。實際上，在大多數瀏覽器中都沒問題，猜猜看，到底是哪個瀏覽器搞的破壞？

在開發這種技術時，我們發現如果要應付的不是圖片，而是一個區塊層級元素，則難度之大超出了我們的想象。不管我們如何嘗試，IE 總是把左上方（也就是“突出”陰影之外的部分）給切掉。更可笑的是，只有 5.0 版的 IE 表現正常。看來任何技巧、溢出設定或者建議都於事無補（當然也試過念咒語）。我們決定放棄，轉而尋求別的解決方案。

我們先從 Douglas Bowman 的Sliding Doors（滑門）方法開始，當然額外的開銷（另一個 div）必須要有，我們的這個段落應該是這個樣子：

<div class="p-shadow"><div><p>The rain in Spain ...</p></div></div>

與剛才指定負的左、上邊距（margin）值的做法相反，這回我們為右、下邊距（padding）指定正值，將陰影（其實是外層 div 的背景）暴露出來。然後，我們用一個局部透明的 GIF 圖片放在陰影之上，偽造出假的陰影位移效果。注意，圖片可見部分的顏色要與用於陰影製作效果的背景顏色相同。這幅圖片的名字為 “shadow2.gif”。圖片的構成如下：

 

 

這就是GIF 圖片的例子（這幅圖片在瀏覽器的中看起來好像是空白的，所以最好把它存起來，在圖形處理軟體中觀看。）

這就是我們想要達到的效果：

 

 

下面是實現這種效果的樣式表。注意額外的圖片和補白（padding）僅僅用於 Internet Explorer。絕大多數瀏覽器會忽略內層的 div，仍然使用前面講過的圖片陰影製作效果技術。

.p-shadow {width: 90%;float:left;background: url(shadowAlpha.png) no-repeat bottom right !important;background: url(shadow.gif) no-repeat bottom right;margin: 10px 0 0 10px !important;margin: 10px 0 0 5px;}.p-shadow div {background: none !important;background: url(shadow2.gif) no-repeat left top;padding: 0 !important;padding: 0 6px 6px 0;}.p-shadow p {color: #777;background-color: #fff;font: italic 1em georgia, serif;border: 1px solid #a9a9a9;padding: 4px;margin: -6px 6px 6px -6px !important;margin: 0;}

在前面的圖片例子中提到的背景色注意事項，段落也應加以注意。這就是最終的效果。（請試著改變瀏覽器視窗大小，觀察段落大小的改變和陰影的調整。）

The rain in Spain falls mainly on the plain. The rain in Spain falls mainly on the plain. The rain in Spain falls mainly on the plain.

 

附註

本文為了清楚起見，將圖片和段落的樣式打散了，但其實可以做些小小的更改，將它們整合在一起。

這個技術已經在 Gecko 引擎的瀏覽器、Safari、Opera 和 IE 5.0+ 中 測試過，除了提到的一些微小的差異，還沒有發現什麼問題。應當適用於大多數的瀏覽器（除了 Netscape 4.x）。

致謝

感謝發明了陰影技術的 Dunstan，以及 Douglas Bowman 的 Sliding Doors 技術。