text-shadow是從CSS 2版本開始便已有的屬性，能為字體添加模糊及陰影的效果。到目前為止只有Opera支援得最好，IE和Firefox還不支援，Safari與Konqueror則只能支援一組屬性值。
以下是一組屬性值的取值方式
多組則用逗號隔開
在多組屬性值下的Safari和Konqueror，只對第一組有效，後面幾組無效。
以下是多組屬性值的代碼示例：
Opera 顯示結果：
以下是一組屬性值的取值方式
| 屬性 | 屬性值 | |
|---|---|---|
| 水平延展 垂直延展 opacity 顏色 | ||
| 示例 | text-shadow: | 2px 2px 5px #ff0000 |
多組則用逗號隔開
| 屬性 | 屬性值 | |
|---|---|---|
| 第一組 第二組 第三組 | ||
| 示例 | text-shadow: | -1px 1px 5px #ff0000, 2px -2px 10px #336699, -3px 3px 15px #999999 |
以下是多組屬性值的代碼示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>睡蓮‧池水間 </title> <style type="text/css"> /*<![CDATA[*/ body{background:#000} p{margin:20px 30px;font-family:'標楷體';font-size:50px} #style1{color:#000;text-shadow: -1px -1px 0px #c393c3, 1px 1px 0px #c393c3, 0px 0px 5px #fff, 0px 1px 35px #774877} #style2{color:#ffe3ff;text-shadow:1px -1px 20px #431f43, -10px -1px 20px #431f43, 10px -3px 23px #c393c3, -10px -3px 23px #c393c3, 2px 3px 1px #000} #style3{color:#a559a5;text-shadow: 1px 2px 1px #ffe3ff, 2px 7px 30px #1f081f, 1px 4px 2px #ffe3ff, 0px 0px 0px #000} #style4{color:#000;text-shadow: 0px 1px 0px #840084, -1px 1px 0px #895189, 1px 0px 0px #895189, 0 0 10px #fff, -5px -1px 60px #895189, 5px -10px 60px #895189, 0px 3px 0px #fff} #style5{ color: #000;text-shadow: 0 2px 10px #fff, 0 -5px 6px #ffe8ff, 2px -9px 6px #e1c3e0, -2px -13px 15px #d7b5d5, 8px -17px 35px #5f045a, -8px -30px 100px #4f004e} #style6{ color: #666;text-shadow: -1px -1px 0px #fff, 1px 1px 0px #333} /*]]>*/ </style> </head> <body> <p id="style1">池水間</p> <p id="style2">池水間</p> <p id="style3">池水間</p> <p id="style4">池水間</p> <p id="style5">池水間</p> <p id="style6">池水間</p> </body> </html>
Opera 顯示結果：
