陰影效果成了平面設(shè)計(jì)的一個(gè)套路，平面設(shè)計(jì)師把它當(dāng)作瑞士軍刀的起子，隨處使用，盡管招致不少非議，卻一直廣受歡迎。雖然用圖像編輯軟件也能實(shí)現(xiàn)陰影效果，但在Web設(shè)計(jì)快速發(fā)展的今天，適應(yīng)性和易用性是大勢(shì)所趨，這種以固定背景效果制作出的靜態(tài)圖片很難有良好的適應(yīng)性。 
假如有一種技術(shù)，用 CSS 對(duì)任意塊級(jí)元素靈活地添加陰影，而且能隨著內(nèi)容的大小自動(dòng)擴(kuò)展，還要適用于大多數(shù)流行的瀏覽器，那該有多好！不信么？告訴您，只需寫(xiě)幾行代碼就能做到。
是不是很有意思？先別急，這可不是我們的發(fā)明，我們只不過(guò)對(duì)此作了改進(jìn)。這個(gè)技術(shù)是由著名的 1976 design 上的 Dunstan Orchard （向 Dunstan 脫帽致敬）構(gòu)思出來(lái)的，并且作了演示。我們覺(jué)得這個(gè)方法簡(jiǎn)潔實(shí)用，但深入研究之后，發(fā)現(xiàn)還有改進(jìn)的余地。
這里是它的工作原理：先用圖像軟件制作一幅背景圖片，圖片上只有陰影，不能有可見(jiàn)的邊界（一種簡(jiǎn)便的方法是對(duì)空白的選擇區(qū)域應(yīng)用某種效果）。這個(gè)圖片要能夠覆蓋將要修飾的最大元素，實(shí)踐當(dāng)中，800 x 600 一般就足夠了。將它保存為GIF圖片，記住一定要在背景顏色之上應(yīng)用效果，此外再把它另存為完全透明的PNG圖片（即沒(méi)有背景色）。這是為了根據(jù)瀏覽器的能力區(qū)別對(duì)待[譯注：即讓支持透明 PNG 圖片的瀏覽器使用PNG，IE 使用GIF。]。這里是將要用到的 GIF 文件以及 PNG 文件。 
我們先從如何為圖片添加陰影開(kāi)始，然后再擴(kuò)展到其他塊級(jí)元素。為了直觀起見(jiàn)，我們把這個(gè) class 命名為 img-shadow，我們先用這只可愛(ài)的小貓作個(gè)試驗(yàn)：
相應(yīng)的代碼（只需額外增加一個(gè) div ）：
<div class="img-shadow">  <img src="cat.jpg" alt="test"/> </div> 
下圖演示了我們所用到的技術(shù)： 
首先，我們用先前準(zhǔn)備的陰影圖片作為該 div 的背景。
background: url(shadow.gif) no-repeat bottom right; 
然后，我們將圖片的左邊距和上邊距設(shè)為負(fù)值，使它“投下”陰影，陰影的寬度為 6 個(gè)像素，也就代碼中的數(shù)字：
margin: -6px 6px 6px -6px;
為避免指定該 div 的大小，我們將它浮動(dòng)起來(lái)。（否則它將占據(jù)全部可用的水平空間。）
還記得前面我們說(shuō)過(guò)，要讓好的瀏覽器顯示好的陰影效果嗎？訣竅在這行代碼：
background: url(shadowAlpha.png) no-repeat right bottom !important;
這里的“!important”表示此處指定的樣式的優(yōu)先級(jí)高于同元素上的普通樣式聲明（參見(jiàn) 標(biāo)準(zhǔn)），對(duì)透明 PNG 缺乏內(nèi)在支持的所有版本的 Internet Explorer 剛好也不支持“!importan”。通過(guò)互相矛盾的兩次聲明，我們得到了期望的結(jié)果（IE 用的是第二個(gè)，而大多數(shù)瀏覽器會(huì)采用第一個(gè)）。最終的結(jié)果是這樣的：當(dāng)需要改變背景顏色時(shí)，支持 PNG 的瀏覽器顯示出的陰影效果非常完美。而在可憐的 IE 中，陰影還是它原來(lái)的顏色。
你可能會(huì)問(wèn)，為什么要這樣做？答案是可以一箭雙雕。  我們能夠: 不費(fèi)吹灰之力就可以自動(dòng)地讓高級(jí)的瀏覽器發(fā)揮它的最好效果。  它能自我修復(fù): 如果（隨Longhorn而來(lái)的）新版 Internet Explorer 支持這兩個(gè)標(biāo)準(zhǔn)，我們無(wú)須進(jìn)行修補(bǔ)，仍然能夠獲得精確、完全透明的陰影。 
最終的 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;  } 
為了補(bǔ)償 IE 浮動(dòng)模型的錯(cuò)誤，所以上面代碼中的 margin 有些差異，而最后一行的 padding 將圖片框裝扮得更