用CSS技術實現網頁元素的陰影效果

邊文婕

（山西省政法管理干部學院，山西 太原 030012）

網頁設計中，為了突出顯示某些對象或者為了美觀，經常會給文字或圖片等對象設計陰影效果。過去，即使為了給文字設置陰影，也必須先把它做成圖像，然后使用圖像處理軟件增加陰影。這種做法給設計師增添了不少負擔，而且它增加了圖片的使用，從SEO和頁面加載速度方面來說，對網站都是不利的。最新的CSS技術終于給這個問題提供了較完美的解決方案，單純使用CSS代碼，無需使用圖片，也可實現漂亮的陰影效果。

text-shadow屬性使用起來并不難，我們先來看一個簡單的例子。

下面這段代碼是文本對象的CSS樣式代碼：

實現的效果如下圖：

（圖1 簡單的text-shadow陰影效果）

從圖中我們可以看出，此種方法實現的陰影效果質量較高，而且代碼非常簡單，就是一句：“text-shadow：green 2px 2px 2px；”。那么我們來仔細分析一下text-shadow這個屬性。

text-shadow屬性的語法為：

color指定陰影的顏色值；第一個length指定陰影的水平偏移，如果為正值，陰影向右偏移，如果為負值，陰影向左偏移；第二個length指定陰影的垂直偏移，如果為正值，陰影向下偏移，如果為負值，陰影向上偏移；opacity指定模糊效果的作用距離，也就是陰影的半徑。其中color一項可放于最前，也可放于最后。

text-shadow還可以設置多重陰影效果，也就是可以設計出不同顏色、不同半徑大小的多層陰影，如圖2所示：

（圖2 text-shadow的多重陰影效果）

其CSS代碼如下：

要設置多重陰影效果，只需給text-shadow設置多組參數，分別用逗號隔開。上面示例中共設置了三組參數，從而給文本增加了黑色、紫色、藍色三層陰影。對于多層陰影的堆疊順序，CSS2.0和CSS3.0有不同的規則。CSS2.0中，寫在最前面的一組參數設置出的陰影位于最底層，其余的依次向上堆疊；CSS3.0中，寫在最前面的一組參數設置出的陰影位于最頂層，其余的依次向下堆疊。

text-shadow 的 color參數支持 hex，rgb，rgba，hsl，hsla和顏色名稱等多種顏色模式，其中“rgba”顏色模式有其獨到之處，該模式除了R（紅色）、G（綠色）、B（藍色）三個數值外，還可以設置Alpha透明度，從而使陰影效果更趨完美。上面示例就用到了這種方法，黑色、紫色、藍色陰影的Alpha透明度分別為 0.8、0.5、0.9。

作為CSS3.0的新增屬性，text-shadow同樣要面對瀏覽器的兼容問題。目前text-shadow被Firefox 3.5+、chrome 2.0+、Safari 1.1+ 和 opera 9.5+ 支持，而IE所有版本都不支持該屬性。各瀏覽器對多重陰影的支持情況也不同，Opera 9.5+支持最多6-9層陰影，并使用CSS2.0中的堆疊順序，即最先定義的陰影在最底層，并且規定模糊半徑最大值為100px；Firefox理論上支持無限層陰影，并遵循CSS3.0中規定的堆疊順序，即最先定義的陰影在最頂層；Safari 1.1-3.2只支持單層陰影，Safari 4.0+才支持多層陰影，并且陰影層疊順序也依照CSS3.0的規則。

除了文字陰影以外，網頁中有時也要給圖片、表格等對象設計陰影效果，這時就用到box-shadow這個屬性。其使用方法和text-shadow類似。先來看一個示例，給一個DIV容器設置如下CSS代碼：

實現的效果如下圖：

（圖3 box-shadow的外陰影效果）

先來看box-shadow的瀏覽器兼容問題。Opera從10.50版本開始支持box-shadow屬性；Firefox通過私有屬性-moz-box-shadow支持box-shadow；Safari和Chrome通過私有屬性-webkit-box-shadow支持box-shadow。

所有IE版本都不支持box-shadow。上面示例中第二行代碼是針對Safari和Chrome瀏覽器編寫，第三行代碼是針對Firefox瀏覽器編寫。

box-shadow屬性的語法為：

inset是一個可選項，如果不設置，其默認的投影方式是外陰影，如果取其唯一值inset，就是將外陰影變成內陰影；X-offset是指陰影水平偏移量，如果為正值，則陰影在對象的右邊，反之，陰影在對象的左邊；Y-offset指陰影的垂直偏移量，如果為正值，陰影在對象的底部，反之，陰影在對象的頂部；blur-radius指陰影模糊半徑，此參數是可選項，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；spread-radius指陰影擴展半徑，此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之則縮小。Color指陰影顏色，此參數可選，如果不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，webkit內核下的safari和chrome瀏覽器默認的是無色，也就是透明，所以一般不要省略此參數。

現在來分析上面示例中box-shadow的參數設置，其投影方式沒有設置，所以為默認的外陰影；陰影在X軸和Y軸的偏移量都為0；陰影的模糊半徑是10px；擴展值沒有設置，所以陰影沒有延展擴大也沒有縮小；顏色值是blue，為藍色。如果其它參數保持不變，只把投影方式的設置更改為inset，我們就會看到外陰影變為內陰影，效果如下圖：

（圖4 box-shadow的內陰影效果）

同text-shadow屬性一樣，box-shadow屬性也可實現多重陰影，方法也是設置多組參數并且用逗號隔開。它的陰影順序與CSS3.0中text-shadow陰影的順序一樣，也就是先寫的陰影位于上層，后寫的位于下層。CSS3.0中的box-radius屬性是用來設置圓角矩形的，box-shadow的多重陰影與box-radius配合可以實現漂亮的圓角矩形，效果如圖5所示。

（圖5 box-shadow的多重陰影效果）

其CSS代碼如下：

示例中矩形的圓角半徑為10 px；上層為紅色陰影，X軸和Y軸的偏移量都是2 px，也就是陰影比矩形向右、向下偏移2像素，陰影的模糊半徑為5像素；下層為黃色陰影，X軸和Y軸的偏移量都是0，也就是陰影相對于矩形沒有偏移，陰影的模糊半徑為30像素；顏色值為red的一組參數寫在前面，顏色值為yellow的一組參數寫在后面，所以紅色陰影位于黃色陰影的上方。

通過上述研究可以看出，使用CSS3.0中的text-shadow屬性和box-shadow屬性可以實現較完美的陰影效果，這種方法操作簡便，避開了麻煩的圖片處理工作，更重要的是減少圖片使用后節省了寶貴的帶寬，加快了網頁加載速度，增強了網站的SEO性能。但美中不足的是，到目前為止，IE瀏覽器還不支持這兩個屬性。為了獲得IE的支持，我們只能使用CSS中Shadow和Dropshadow這兩個濾鏡來實現陰影效果。雖然這樣也避免了使用圖片，但實現的陰影效果看起來生硬粗糙，而且由于這種方法沒有區分文本陰影與盒子陰影，使用時容易造成混亂。我們只好期待新版本的IE能增加對text-shadow屬性和box-shadow屬性的支持。

［1］Airen.CSS3的文字陰影.http：//www.w3cplus.com/node/52，2011.

［2］Chris.box-shadow back on the menu（and other updates）.http：//www.css3.info，2010.

［3］邁耶.CSS權威指南［M］.北京：中國電力出版社，2008.

［4］莫里，陳黎夫等.CSS禪意花園［M］.北京：人民郵電出版社，2007.