Opera下的text-shadow

睡蓮 標籤

　　text-shadow是從CSS 2版本開始便已有的屬性，能為字體添加模糊及陰影的效果。到目前為止只有Opera支援得最好，IE和Firefox還不支援，Safari與Konqueror則只能支援一組屬性值。

以下是一組屬性值的取值方式：

text-shadow:
		-1px 1px 5px #ff0000,   /* 第一組 ＊/
		2px -2px 10px #369,   /* 第二組 ＊/
		-3px 3px 15px #999   /* 第三組 ＊/

在多組屬性值下的Safari和Konqueror，只對第一組有效，後面幾組無效。

以下是多組屬性值的代碼示例：

<!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 顯示結果：

text-shadow