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

一、浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 －webkit－ 或者 －moz－ 使用时需要指定前缀。

属性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＞项目＜／title＞＜／head＞＜body＞  ＜h1＞文本阴影效果！＜／h1＞
 ＜p＞＜b＞注意：＜／b＞ IE9和更早的版本， 不支持text－shadow属性．＜／p＞＜／body＞＜／CSS＞CSS3 文本阴影

CSS3 text－shadow 属性应用阴影到文本上．

在简单的用法， 你可以在水平方向设置阴影（2px）和垂直方向设置阴影（2px）：

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

添加一个颜色到阴影：

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

显示一个带有黑色阴影的白色文本：

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

下面的例子显示了红色霓虹灯的阴影：

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

多重阴影

要在文本中添加多个阴影，可以添加逗号分隔的阴影列表。

下面的实例显示了一个红色和蓝色的霓虹灯阴影：

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

下面实例显示了一个白色文本带有黑色，蓝色和深蓝色阴影：

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

三、box－shadow 属性

CSS3 box－shadow 属性应用阴影到元素上．

在最简单的用法中，只指定水平阴影和垂直阴影：

一个黄色的 ＜div＞ 元素使用一个黑色box－shadow

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

下一步，添加一个颜色到阴影，对阴影添加模糊效果：

一个黄色的 ＜div＞元素带模糊红／灰 box－shadow。

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

案例

添加阴影到 ：：before 和 ：：after 伪类中， 来创建一个有趣的效果。

＜！DOCTYPE CSS＞＜CSS lang＝＂en＂＞＜head＞  ＜meta charset＝＂UTF－8＂＞  ＜title＞项目＜／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＞

四、总结

本文基于CSS基础，使用CSS语言。介绍了有关CSS阴影效果的应用，从基础的文本阴影入手， 对CSS常见的阴影表示效果都做了一一的讲解。通过一个个实例的演示，实例运行的效果图。希望能够帮助你更好的学习CSS。