使用CSS3，你可以為文本和元素添加陰影。

一、瀏覽器支持

表中的數(shù)字指定完全支持該屬性的第一個(gè)瀏覽器版本。

數(shù)字后面的 －webkit－ 或者 －moz－ 使用時(shí)需要指定前綴。

屬性ChromeFirefoxSafariOperaIEtext－shadow4．010．03．54．09．5box－shadow10．0 4．0 －webkit－9．04．0 3．5 －moz－5．1 3．1 －webkit－10．5

二、CSS3 陰影的文字特效

CSS代碼：

＜！DOCTYPE CSS＞＜CSS lang＝＂en＂＞＜head＞  ＜meta charset＝＂UTF－8＂＞  ＜title＞項(xiàng)目＜／title＞＜／head＞＜body＞  ＜h1＞文本陰影效果！＜／h1＞
 ＜p＞＜b＞注意：＜／b＞ IE9和更早的版本， 不支持text－shadow屬性．＜／p＞＜／body＞＜／CSS＞CSS3 文本陰影

CSS3 text－shadow 屬性應(yīng)用陰影到文本上．

在簡(jiǎn)單的用法， 你可以在水平方向設(shè)置陰影（2px）和垂直方向設(shè)置陰影（2px）：

h1 ｛    text－shadow： 2px 2px；｝

添加一個(gè)顏色到陰影：

h1 ｛    text－shadow： 2px 2px red；｝

顯示一個(gè)帶有黑色陰影的白色文本：

h1 ｛        color： white；        text－shadow： 2px 2px 4px ＃000000；    ｝

下面的例子顯示了紅色霓虹燈的陰影：

h1 ｛        text－shadow： 0 0 3px ＃FF0000；    ｝

多重陰影

要在文本中添加多個(gè)陰影，可以添加逗號(hào)分隔的陰影列表。

下面的實(shí)例顯示了一個(gè)紅色和藍(lán)色的霓虹燈陰影：

h1 ｛    text－shadow： 0 0 3px ＃FF0000， 0 0 5px ＃F00000；｝

下面實(shí)例顯示了一個(gè)白色文本帶有黑色，藍(lán)色和深藍(lán)色陰影：

h1 ｛    text－shadow： 0 0 3px ＃FF0000， 0 0 5px ＃0000FF；｝

三、box－shadow 屬性

CSS3 box－shadow 屬性應(yīng)用陰影到元素上．

在最簡(jiǎn)單的用法中，只指定水平陰影和垂直陰影：

一個(gè)黃色的 ＜div＞ 元素使用一個(gè)黑色box－shadow

div ｛        width： 300px；        height： 100px；        padding： 15px；        background－color： yellow；        box－shadow： 10px 10px；    ｝

下一步，添加一個(gè)顏色到陰影，對(duì)陰影添加模糊效果：

一個(gè)黃色的 ＜div＞元素帶模糊紅／灰 box－shadow。

div ｛        width： 300px；        height： 100px；        padding： 15px；        background－color： yellow；        box－shadow： 10px 10px 5px grey；    ｝

案例

添加陰影到 ：：before 和 ：：after 偽類中， 來創(chuàng)建一個(gè)有趣的效果。

＜！DOCTYPE CSS＞＜CSS lang＝＂en＂＞＜head＞  ＜meta charset＝＂UTF－8＂＞  ＜title＞項(xiàng)目＜／title＞  ＜style＞  ＃boxshadow ｛      position： relative；      －moz－box－shadow： 1px 2px 4px rgba（0， 0， 0，0．5）；      －webkit－box－shadow： 1px 2px 4px rgba（0， 0， 0， ．5）；      box－shadow： 1px 2px 4px rgba（0， 0， 0， ．5）；      padding： 10px；      background： white；  ｝
  Make the image fit the box   ＃boxshadow img ｛      width： 100％；      border： 1px solid ＃8a4419；      border－style： inset；  ｝
 ＃boxshadow：：after ｛      content： ＇＇；      position： absolute；      z－index： －1；  hide shadow behind image       －webkit－box－shadow： 0 15px 20px rgba（0， 0， 0， 0．3）；      －moz－box－shadow： 0 15px 20px rgba（0， 0， 0， 0．3）；      box－shadow： 0 15px 20px rgba（0， 0， 0， 0．3）；      width： 70％；      left： 15％；  one half of the remaining 30％       height： 100px；      bottom： 0；CSS  ｝＜／style＞＜／head＞＜body＞  ＜div id＝＂boxshadow＂＞    ＜img src＝＂img／fy＿indexBg．jpg＂ alt＝＂Norway＂ width＝＂600＂ height＝＂400＂＞  ＜／div＞＜／body＞＜／CSS＞

四、總結(jié)

本文基于CSS基礎(chǔ)，使用CSS語言。介紹了有關(guān)CSS陰影效果的應(yīng)用，從基礎(chǔ)的文本陰影入手， 對(duì)CSS常見的陰影表示效果都做了一一的講解。通過一個(gè)個(gè)實(shí)例的演示，實(shí)例運(yùn)行的效果圖。希望能夠幫助你更好的學(xué)習(xí)CSS。