設定文字的陰影效果，看起來像立體字。此特徵在 CSS2 有定義，因為不佳所以在 CSS2.1 被拿掉；CSS3 加以改善，重新定義。瀏覽器對此特徵的支援並不完整，Firefox3.5 才有此項。可設為：
- none：沒有陰影，此為預設值。
- 陰影：可設陰影的 顏色，沒有設定時使用 color 特徵的值。可設定兩個 長度。第一個長度是水平位移，向右為正值。第二個長度是垂直位移，向下為正值。可以選擇性的加上第三個長度作為模糊半徑。可以設定多組陰影，用”,”分開，依先後秩序重疊。Safari 只能有一層陰影。
- inherit：繼承父元素的特徵值。
加上陰影不會改變元素的矩形格子（box）之大小。
- 風格用法：
<div style='font-size: 160%'>
<span style='text-shadow: red 5px 5px, green 2px 2px'>
子曰：學而時習之，不亦說乎？</span><br /><br />
<span style='text-shadow: green -5px 5px 3px'>
子曰：有朋自遠方來，不亦樂乎？</span><br /><br />
<span style='text-shadow: blue 5px -5px'>
子曰：人不知而不慍，不亦君子乎？</span><br />
<span style='text-shadow: red 0px 0px 5px;
color:black; font-size:64px; font-weight:900'>
FLAME</span>
</div> - 執行結果：子曰：學而時習之，不亦說乎？
子曰：有朋自遠方來，不亦樂乎？
子曰：人不知而不慍，不亦君子乎？
FLAME
- 此功能只在 Safari 成功展現；IE, Firefox3.0, Chrome 都沒有支援。
DropShadow()。IE 沒有 text-shadow 特徵，但是可用 filter:DropShadow() 達成類似的功能。其用法是：
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=長度, OffY=長度, Color='顏色', Positive='布林值');
OffX 是投影的水平位移，向右為正值，單位為 px，預設值為 5。OffY 是投影的垂直位移，向下為正值，單位為 px，預設值為 5。Color 為投影的顏色。如果像素是透明色，Positive 必須設為 0（false）才會有投影；Positive 設為 1（true, 此為預設值），則只有非透明色有投影。元素必須設為 hasLayout 才能使用 filter，一般使用 zoom:1，這樣不會影響其它瀏覽器。
元素物件.filters.item('DXImageTransform.Microsoft.dropshadow').特徵。左項可用來讀取或設定特徵值。DropShadow 的特徵有 OffX, OffY, Color, Positive, enabled；可以不分大小寫。
- 風格用法：
<style type="text/css">
.shd {text-shadow: red 5px 5px;
filter:progid:DXImageTransform.Microsoft.DropShadow(Color='red');
width: 120px;
height:100px;
}
</style>
<p id='k2' class=shd>投影</p>
<script type='text/javascript'>
var o=document.getElementById('k2');
document.write( o.filters.item('DXImageTransform.Microsoft.dropshadow').offx );
</script> - 執行結果：
投影
- 上例，Firefox3.0, Chrome 失敗；IE6, Safari 都成功。text-shadow 與 DropShadow() 有蠻多差異的，使用時請多測試。
| text-shadow（你正在看 第一頁） | : | 第一頁 | 第二頁 |
