用 CSS 實現的陰影效果

中文翻譯：onestab [2004.02.28]

「…假如有一種技術，用 css 對任意塊級元素靈活地新增陰影，而且能隨著內容的大小自動擴充套件，還要適用於大多數流行的瀏覽器，那該有多好！不信麼？告訴您，只需寫幾行**就能做到。」

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

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

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

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

相應的**（只需額外增加乙個 div ）：

下圖演示了我們所用到的技術：

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

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

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

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

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

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

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

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

最終的 css **是這樣的：

.img-shadow

.img-shadow img

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

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

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

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

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

我們先從 douglas bowman 的sliding doors（滑門）方法開始，當然額外的開銷（另乙個 div）必須要有，我們的這個段落應該是這個樣子：

the rain in spain ...

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

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

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

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

.p-shadow

.p-shadow div

.p-shadow p

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

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 技術。

用 CSS 實現的陰影效果

用 CSS 實現的陰影效果

用 CSS 實現的陰影效果

用 CSS 實現的陰影效果

相關推薦