CSS2中的text-shadow屬性能夠很容易的給web頁面中的文本添加陰影，但是到目前為
止只有OS X的Safari瀏覽器支持它，今天，我們將為其他瀏覽器創(chuàng)建CSS文本陰影效果，包
括Firefox。
討論了多年的text-shadow屬性可以讓你控制頁面元素陰影的顏色、偏移量及模糊度，盡管
其還未被廣泛支持，但是某些設計師已經開始決定在任意地方使用CSS text-shadows屬性
了。盡管這只是為很少數(shù)量的用戶增強性設計。
CSS Text-Shadows Safari實現(xiàn)
如果你使用的是Safari，你將可以看到在白色的背景上有陰影的白色文本：

This is white text, on a white background. Yet in Safari, you can read this,
because of the black text-shadow.
如果你不是使用Safari，一下是效果圖：

瀏覽器通用CSS文本陰影
Firefox是個偉大的瀏覽器，但是它不支持以上的效果，所以我決定用CSS實現(xiàn)一個類似的
效果，雖然沒有前面你看到的text-shadow屬性效果完美，但是該方法適用于更大范圍的瀏
覽器，包括Safari。
This is white text, on a white background. Yet with CSS Drop Shadows, you can
read this,because of the black text-shadow.
HTML代碼
要添加陰影效果，我們在我們的例子段落中創(chuàng)建了個title屬性內容是需要投影的文本的內
容一致。因為在該方法中我們重復了文本，所以該方法更適合在標題或文本比較短的段落
中，而不適合整個頁面的陰影效果。

This is white text, on a white background.Yet with CSS Drop Shadows, you
can read this, because of the black text-shadow.

我們在段落中增強了個標簽用來控制正常的文本的位置以將其與生成的陰影區(qū)分開。
The CSS
CSS :before 虛擬元素用來從段落的title屬性中生成陰影，而絕對(absolute)定位用來將
正常文本放置于陰影文本之上。
.shadow  { position:relative; display:block; color:#fff; }.shadow span
{ position:absolute; display:block; top:0px;  }.shadow:
before { display:block; padding:1px; content: attr(title); color:#666;  }
 你可以使用position:absolute控制在相對定位（position:relative）的元素內部的元素
的位置。該技能使得我們可以控制正常文本和陰影文本的放置，而又可以在原來的文本流程
中使用該元素。你可以在.shadow中控制文本及陰影的背景顏色、字體等屬性，而可以在
.shadow:before中使用padding屬性控制陰影的偏移值，使用color設置陰影的顏色等

• css
• 陰影