用CSS技術(shù)實(shí)現(xiàn)網(wǎng)頁元素的陰影效果

邊文婕

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

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

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

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

實(shí)現(xiàn)的效果如下圖：

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

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

text-shadow屬性的語法為：

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

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

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

其CSS代碼如下：

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

text-shadow 的 color參數(shù)支持 hex，rgb，rgba，hsl，hsla和顏色名稱等多種顏色模式，其中“rgba”顏色模式有其獨(dú)到之處，該模式除了R（紅色）、G（綠色）、B（藍(lán)色）三個(gè)數(shù)值外，還可以設(shè)置Alpha透明度，從而使陰影效果更趨完美。上面示例就用到了這種方法，黑色、紫色、藍(lán)色陰影的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中的堆疊順序，即最先定義的陰影在最底層，并且規(guī)定模糊半徑最大值為100px；Firefox理論上支持無限層陰影，并遵循CSS3.0中規(guī)定的堆疊順序，即最先定義的陰影在最頂層；Safari 1.1-3.2只支持單層陰影，Safari 4.0+才支持多層陰影，并且陰影層疊順序也依照CSS3.0的規(guī)則。

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

實(shí)現(xiàn)的效果如下圖：

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

現(xiàn)在來分析上面示例中box-shadow的參數(shù)設(shè)置，其投影方式?jīng)]有設(shè)置，所以為默認(rèn)的外陰影；陰影在X軸和Y軸的偏移量都為0；陰影的模糊半徑是10px；擴(kuò)展值沒有設(shè)置，所以陰影沒有延展擴(kuò)大也沒有縮??；顏色值是blue，為藍(lán)色。如果其它參數(shù)保持不變，只把投影方式的設(shè)置更改為inset，我們就會(huì)看到外陰影變?yōu)閮?nèi)陰影，效果如下圖：

（圖4 box-shadow的內(nèi)陰影效果）

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

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

其CSS代碼如下：

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

通過上述研究可以看出，使用CSS3.0中的text-shadow屬性和box-shadow屬性可以實(shí)現(xiàn)較完美的陰影效果，這種方法操作簡便，避開了麻煩的圖片處理工作，更重要的是減少圖片使用后節(jié)省了寶貴的帶寬，加快了網(wǎng)頁加載速度，增強(qiáng)了網(wǎng)站的SEO性能。但美中不足的是，到目前為止，IE瀏覽器還不支持這兩個(gè)屬性。為了獲得IE的支持，我們只能使用CSS中Shadow和Dropshadow這兩個(gè)濾鏡來實(shí)現(xiàn)陰影效果。雖然這樣也避免了使用圖片，但實(shí)現(xiàn)的陰影效果看起來生硬粗糙，而且由于這種方法沒有區(qū)分文本陰影與盒子陰影，使用時(shí)容易造成混亂。我們只好期待新版本的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權(quán)威指南［M］.北京：中國電力出版社，2008.

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