陰影效果成了平面設計的一個套路，平面設計師把它當作瑞士軍刀的起子，隨處使用，盡管招致不少非議，卻一直廣受歡迎。雖然用圖像編輯軟件也能實現陰影效果，但在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 將圖片框裝扮得更