1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<title>文字阴影-CSS Text-Shadow in Safari, Opera, Firefox and other Web Browsers</title>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<meta name="description" content="涂聚文,捷为工作室,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">
7<meta name="Robots" content="all index follow ">
8<meta name="Author" content="涂聚文" />
9<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
10<link rel="icon" href="favicon.ico" type="image/ico" />
11<link rel="Bookmark" href="favicon.ico">
12
<style type="text/css">
13
/* * 要素本身
14
* 围绕要素的空格填充（padding）
15 * 围绕空格填充的边框（border）
16 * 围绕边框的边距（空白－margin）
17
*/
18body{
19 font-family:Georgia,serif;
20 margin:1em auto;
21 max-width:60em;
22 padding:0 1em;
23}
24h1,h2{
25 text-shadow: 2px 3px 4px #CCC;
26}
27.example{
28 border: 1px dotted #666;
29 margin: 0.5em 2em 1em;
30 padding: 0.3em;
31}
32code{
33 color:#666;
34}
35div code{
36 display:block;
37 margin:0 0 0.4em 0;
38}
39.example p{
40 font-size: 150%;
41 font-weight: bold;
42 margin: 0;
43 padding: 10px 15px;
44}
45address{
46 font-style:normal;
47 text-align:right;
48
}
49</style>
50<script type="text/javascript">
51
52var handle = false;
53var textBrightness = 50;
54var fireCount = 6;
55var fireDelta = new Array();
56var step = 0;
57var angle = 0;
58var radius = 6;
59
60function animate()
61{
62 fireDelta[fireCount - step] = Math.random() * 2 - 1;
63 var e = document.getElementById("fire");
64 var s = "";
65 for (var i = fireCount; i--; )
66 {
67 if (s) s = ", ";
68 s = Math.round(fireDelta[(i fireCount - step) % fireCount] * i) "px " (-2 * i -1) "px " (2 i) "px ";
69 s = "rgb(255, " (255 - i * Math.floor(255 / (fireCount - 1))) ", 0)";
70 }
71 e.style.textShadow = s;
72 /* We need to change something, else the shadow will not be re-rendered. */
73 e.style.color = "rgb("
74 (textBrightness step % 2) ", "
75 textBrightness ", "
76 textBrightness ")";
77 step = (step 1) % fireCount;
78
79 /* RGB */
80 angle -= 0.4;
81 if (angle <= 0) angle = Math.PI * 2;
82 var e = document.getElementById("rgb");
83 var s =
84 Math.round(Math.sin(angle) * radius) "px "
85 Math.round(Math.cos(angle) * radius) "px 4px #0F0, "
86 Math.round(Math.sin(angle Math.PI * 4 / 3) * radius) "px "
87 Math.round(Math.cos(angle Math.PI * 4 / 3) * radius) "px 4px #F00, "
88 Math.round(Math.sin(angle Math.PI * 2 / 3) * radius) "px "
89 Math.round(Math.cos(angle Math.PI * 2 / 3) * radius) "px 4px #33F";
90 e.style.textShadow = s;
91 /* We need to change something, else the shadow will not be re-rendered. */
92 e.style.color = "rgb(" (255 - step % 2) ", 255, 255)";
93}
94
95function toggleAnimation()
96{
97 for (var i = 0; i < fireCount; i )
98 fireDelta[i] = Math.random() * 2 - 1;
99 if (handle)
100 {
101 window.clearInterval(handle);
102 handle = false;
103 }
104 else
105 handle = window.setInterval(function() { animate(); }, 100);
106 return false;
107}
108
109</script>
110</head>
111<body onload="toggleAnimation()">
112
113<h1>CSS Text-Shadow in Safari, Opera, Firefox and more</h1>
114
115<p>The CSS 2 property <code>text-shadow</code> is supported in
116Safari since version 3 (also available for Windows), Opera since 9.5, Firefox since 3.1, Konqueror and iCab.
117Future versions of Google Chrome should also support <code>text-shadow</code> because Chrome is based on WebKit,
118the rendering engine behind Safari. Internet Explorer 8 does not support such text shadows
119(except for some DirectX image transform filters).</p>
120
121<h2>Animated multiple Shadows (requires JavaScript)</h2>
122
123<p><a href="#" onclick="return toggleAnimation()">Start/stop animations</a>.
124Safari supports one shadow only. Only the first shadow is displayed.</p>
125
126<div class="example">
127<code>element.style.textShadow = "…";</code>
128<p id="rgb" style="background: #000; color: #FFF;">
129Text shadows were defined in 1997 and became applicable in 2009
130</p>
131</div>
132
133<div class="example">
134<code>element.style.textShadow = "…";</code>
135<p id="fire" style="background: #000; color: #666;">
136Text shadows were defined in 1997 and became applicable in 2009
137</p>
138</div>
139
140<h2>Multiple Shadows (max. 6)</h2>
141
142<p>Opera supports at most six shadows.
143Safari supports one shadow only. Only the first shadow is displayed.</p>
144
145<div class="example">
146<code>text-shadow: -1px -1px #666, 1px 1px #FFF;</code>
147
148<p style="background: #CCC; color: #CCC; text-shadow: -1px -1px #666, 1px 1px #FFF;">
149Text shadows were defined in 1997 and became applicable in 2009
150</p>
151</div>
152
153<div class="example">
154<code>text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;</code>
155<p style="background: #999; color: #999; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;">
156Text shadows were defined in 1997 and became applicable in 2009
157</p>
158</div>
159
160<div class="example">
161<code>text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;</code>
162<p style="background: #DDD; color: #EEE; text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;">
163
164Text shadows were defined in 1997 and became applicable in 2009
165</p>
166</div>
167
168<div class="example">
169<code>text-shadow: 1px 0 #F33, -1px 0 #33F;</code>
170<p style="background: #FFF; color: #000; text-shadow: 1px 0 #F33, -1px 0 #33F;">
171Text shadows were defined in 1997 and became applicable in 2009
172</p>
173</div>
174
175<div class="example">
176<code>text-shadow: 2px 0 4px #600, -2px 0 4px #006;</code>
177<p style="background: #FFF; color: #000; text-shadow: 2px 0 4px #600, -2px 0 4px #006;">
178Text shadows were defined in 1997 and became applicable in 2009
179
180</p>
181</div>
182
183<div class="example">
184<code>text-shadow: 3px -5px 4px #0F0, -3px -5px 4px #F00, 0 6px 4px #33F;</code>
185<p style="background: #000; color: #FFF; text-shadow: 3px -5px 4px #0F0, -3px -5px 4px #F00, 0 6px 4px #33F;">
186Text shadows were defined in 1997 and became applicable in 2009
187</p>
188</div>
189
190<div class="example">
191<code>text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;</code>
192<p style="background: #FFF; color: #FFF; text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;">
193Text shadows were defined in 1997 and became applicable in 2009
194</p>
195
196</div>
197
198<h2>Classical Shadows</h2>
199
200<div class="example">
201<code>text-shadow: 1px 1px 2px #999;</code>
202<p style="background: #FFF; color: #000; text-shadow: 1px 1px 2px #999;">
203Text shadows were defined in 1997 and became applicable in 2009
204</p>
205</div>
206
207<div class="example">
208<code>text-shadow: 2px 2px 3px #999;</code>
209<p style="background: #FFF; color: #069; text-shadow: 2px 2px 3px #999;">
210
211Text shadows were defined in 1997 and became applicable in 2009
212</p>
213</div>
214
215<div class="example">
216<code>text-shadow: 0 0 8px #000;</code>
217<p style="background: #369; color: #FC0; text-shadow: 0 0 8px #000;">
218Text shadows were defined in 1997 and became applicable in 2009
219</p>
220</div>
221
222<h2>Glowing Borders</h2>
223
224<div class="example">
225<code>text-shadow: 0 0 11px #0F0;</code>
226
227<p style="background: #000; color: #0F0; text-shadow: 0 0 11px #0F0;">
228Text shadows were defined in 1997 and became applicable in 2009
229</p>
230</div>
231
232<div class="example">
233<code>text-shadow: 0 0 5px #FF0;</code>
234<p style="background: #000; color: #FFF; text-shadow: 0 0 5px #FF0;">
235Text shadows were defined in 1997 and became applicable in 2009
236</p>
237</div>
238
239<div class="example">
240<code>text-shadow: 0 0 3px #F90;</code>
241<p style="background: #FFF; color: #000; text-shadow: 0 0 3px #F90;">
242
243Text shadows were defined in 1997 and became applicable in 2009
244</p>
245</div>
246
247<h2>Unusual Effects</h2>
248
249<div class="example">
250<code>text-shadow: 0 7px 11px #390;</code>
251<p style="background: #FFF; color: #000; text-shadow: 0 7px 11px #390;">
252Text shadows were defined in 1997 and became applicable in 2009
253</p>
254</div>
255
256<div class="example">
257<code>text-shadow: 0px -15px 0 #F00;</code>
258
259<p style="background: #FFF; color: #000; text-shadow: 0px -15px 0 #F00;">
260Text shadows were defined in 1997 and became applicable in 2009
261</p>
262</div>
263
264<div class="example">
265<code>text-shadow: 0 0 11px #FF6;</code>
266<p style="background: #000; color: #000; text-shadow: 0 0 11px #FF6;">
267Text shadows were defined in 1997 and became applicable in 2009
268</p>
269</div>
270
271<div class="example">
272<code>text-shadow: 0 0 8px #000;</code>
273<p style="background: #FFF; color: #CCC; text-shadow: 0 0 8px #000;">
274
275Text shadows were defined in 1997 and became applicable in 2009
276</p>
277</div>
278
279<address>© <a href="http://dupcit.com/">Geovin Du</a>,
280created in <a href="http://dupcit.com/1188980640">September 2009</a><br>
281</address>
282
283</body>
284</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<title>文字阴影-CSS Text-Shadow in Safari, Opera, Firefox and other Web Browsers</title>5
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">6
<meta name="description" content="涂聚文,捷为工作室,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">7
<meta name="Robots" content="all index follow ">8
<meta name="Author" content="涂聚文" />9
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />10
<link rel="icon" href="favicon.ico" type="image/ico" />11
<link rel="Bookmark" href="favicon.ico"> 12
<style type="text/css">
13
/* * 要素本身
14
* 围绕要素的空格填充（padding）15
* 围绕空格填充的边框（border）16
* 围绕边框的边距（空白－margin）17
*/18
body{19
font-family:Georgia,serif;20
margin:1em auto;21
max-width:60em;22
padding:0 1em;23
}24
h1,h2{25
text-shadow: 2px 3px 4px #CCC;26
}27
.example{28
border: 1px dotted #666;29
margin: 0.5em 2em 1em;30
padding: 0.3em;31
}32
code{33
color:#666;34
}35
div code{36
display:block;37
margin:0 0 0.4em 0;38
}39
.example p{40
font-size: 150%;41
font-weight: bold;42
margin: 0;43
padding: 10px 15px;44
}45
address{46
font-style:normal;47
text-align:right;48
}49
</style>50
<script type="text/javascript">51
52
var handle = false;53
var textBrightness = 50;54
var fireCount = 6;55
var fireDelta = new Array();56
var step = 0;57
var angle = 0;58
var radius = 6;59
60
function animate()61
{62
fireDelta[fireCount - step] = Math.random() * 2 - 1;63
var e = document.getElementById("fire");64
var s = "";65
for (var i = fireCount; i--; )66
{67
if (s) s = ", ";68
s = Math.round(fireDelta[(i fireCount - step) % fireCount] * i) "px " (-2 * i -1) "px " (2 i) "px ";69
s = "rgb(255, " (255 - i * Math.floor(255 / (fireCount - 1))) ", 0)";70
}71
e.style.textShadow = s;72
/* We need to change something, else the shadow will not be re-rendered. */73
e.style.color = "rgb(" 74
(textBrightness step % 2) ", " 75
textBrightness ", " 76
textBrightness ")";77
step = (step 1) % fireCount;78
79
/* RGB */80
angle -= 0.4;81
if (angle <= 0) angle = Math.PI * 2;82
var e = document.getElementById("rgb");83
var s =84
Math.round(Math.sin(angle) * radius) "px " 85
Math.round(Math.cos(angle) * radius) "px 4px #0F0, " 86
Math.round(Math.sin(angle Math.PI * 4 / 3) * radius) "px " 87
Math.round(Math.cos(angle Math.PI * 4 / 3) * radius) "px 4px #F00, " 88
Math.round(Math.sin(angle Math.PI * 2 / 3) * radius) "px " 89
Math.round(Math.cos(angle Math.PI * 2 / 3) * radius) "px 4px #33F";90
e.style.textShadow = s;91
/* We need to change something, else the shadow will not be re-rendered. */92
e.style.color = "rgb(" (255 - step % 2) ", 255, 255)";93
}94
95
function toggleAnimation()96
{97
for (var i = 0; i < fireCount; i )98
fireDelta[i] = Math.random() * 2 - 1;99
if (handle)100
{101
window.clearInterval(handle);102
handle = false;103
}104
else105
handle = window.setInterval(function() { animate(); }, 100);106
return false;107
}108
109
</script>110
</head>111
<body onload="toggleAnimation()">112
113
<h1>CSS Text-Shadow in Safari, Opera, Firefox and more</h1>114
115
<p>The CSS 2 property <code>text-shadow</code> is supported in116
Safari since version 3 (also available for Windows), Opera since 9.5, Firefox since 3.1, Konqueror and iCab.117
Future versions of Google Chrome should also support <code>text-shadow</code> because Chrome is based on WebKit,118
the rendering engine behind Safari. Internet Explorer 8 does not support such text shadows119
(except for some DirectX image transform filters).</p>120
121
<h2>Animated multiple Shadows (requires JavaScript)</h2>122
123
<p><a href="#" onclick="return toggleAnimation()">Start/stop animations</a>.124
Safari supports one shadow only. Only the first shadow is displayed.</p>125
126
<div class="example">127
<code>element.style.textShadow = "…";</code>128
<p id="rgb" style="background: #000; color: #FFF;">129
Text shadows were defined in 1997 and became applicable in 2009130
</p>131
</div>132
133
<div class="example">134
<code>element.style.textShadow = "…";</code>135
<p id="fire" style="background: #000; color: #666;">136
Text shadows were defined in 1997 and became applicable in 2009137
</p>138
</div>139
140
<h2>Multiple Shadows (max. 6)</h2>141
142
<p>Opera supports at most six shadows.143
Safari supports one shadow only. Only the first shadow is displayed.</p>144
145
<div class="example">146
<code>text-shadow: -1px -1px #666, 1px 1px #FFF;</code>147
148
<p style="background: #CCC; color: #CCC; text-shadow: -1px -1px #666, 1px 1px #FFF;">149
Text shadows were defined in 1997 and became applicable in 2009150
</p>151
</div>152
153
<div class="example">154
<code>text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;</code>155
<p style="background: #999; color: #999; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;">156
Text shadows were defined in 1997 and became applicable in 2009157
</p>158
</div>159
160
<div class="example">161
<code>text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;</code>162
<p style="background: #DDD; color: #EEE; text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;">163
164
Text shadows were defined in 1997 and became applicable in 2009165
</p>166
</div>167
168
<div class="example">169
<code>text-shadow: 1px 0 #F33, -1px 0 #33F;</code>170
<p style="background: #FFF; color: #000; text-shadow: 1px 0 #F33, -1px 0 #33F;">171
Text shadows were defined in 1997 and became applicable in 2009172
</p>173
</div>174
175
<div class="example">176
<code>text-shadow: 2px 0 4px #600, -2px 0 4px #006;</code>177
<p style="background: #FFF; color: #000; text-shadow: 2px 0 4px #600, -2px 0 4px #006;">178
Text shadows were defined in 1997 and became applicable in 2009179
180
</p>181
</div>182
183
<div class="example">184
<code>text-shadow: 3px -5px 4px #0F0, -3px -5px 4px #F00, 0 6px 4px #33F;</code>185
<p style="background: #000; color: #FFF; text-shadow: 3px -5px 4px #0F0, -3px -5px 4px #F00, 0 6px 4px #33F;">186
Text shadows were defined in 1997 and became applicable in 2009187
</p>188
</div>189
190
<div class="example">191
<code>text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;</code>192
<p style="background: #FFF; color: #FFF; text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;">193
Text shadows were defined in 1997 and became applicable in 2009194
</p>195
196
</div>197
198
<h2>Classical Shadows</h2>199
200
<div class="example">201
<code>text-shadow: 1px 1px 2px #999;</code>202
<p style="background: #FFF; color: #000; text-shadow: 1px 1px 2px #999;">203
Text shadows were defined in 1997 and became applicable in 2009204
</p>205
</div>206
207
<div class="example">208
<code>text-shadow: 2px 2px 3px #999;</code>209
<p style="background: #FFF; color: #069; text-shadow: 2px 2px 3px #999;">210
211
Text shadows were defined in 1997 and became applicable in 2009212
</p>213
</div>214
215
<div class="example">216
<code>text-shadow: 0 0 8px #000;</code>217
<p style="background: #369; color: #FC0; text-shadow: 0 0 8px #000;">218
Text shadows were defined in 1997 and became applicable in 2009219
</p>220
</div>221
222
<h2>Glowing Borders</h2>223
224
<div class="example">225
<code>text-shadow: 0 0 11px #0F0;</code>226
227
<p style="background: #000; color: #0F0; text-shadow: 0 0 11px #0F0;">228
Text shadows were defined in 1997 and became applicable in 2009229
</p>230
</div>231
232
<div class="example">233
<code>text-shadow: 0 0 5px #FF0;</code>234
<p style="background: #000; color: #FFF; text-shadow: 0 0 5px #FF0;">235
Text shadows were defined in 1997 and became applicable in 2009236
</p>237
</div>238
239
<div class="example">240
<code>text-shadow: 0 0 3px #F90;</code>241
<p style="background: #FFF; color: #000; text-shadow: 0 0 3px #F90;">242
243
Text shadows were defined in 1997 and became applicable in 2009244
</p>245
</div>246
247
<h2>Unusual Effects</h2>248
249
<div class="example">250
<code>text-shadow: 0 7px 11px #390;</code>251
<p style="background: #FFF; color: #000; text-shadow: 0 7px 11px #390;">252
Text shadows were defined in 1997 and became applicable in 2009253
</p>254
</div>255
256
<div class="example">257
<code>text-shadow: 0px -15px 0 #F00;</code>258
259
<p style="background: #FFF; color: #000; text-shadow: 0px -15px 0 #F00;">260
Text shadows were defined in 1997 and became applicable in 2009261
</p>262
</div>263
264
<div class="example">265
<code>text-shadow: 0 0 11px #FF6;</code>266
<p style="background: #000; color: #000; text-shadow: 0 0 11px #FF6;">267
Text shadows were defined in 1997 and became applicable in 2009268
</p>269
</div>270
271
<div class="example">272
<code>text-shadow: 0 0 8px #000;</code>273
<p style="background: #FFF; color: #CCC; text-shadow: 0 0 8px #000;">274
275
Text shadows were defined in 1997 and became applicable in 2009276
</p>277
</div>278
279
<address>© <a href="http://dupcit.com/">Geovin Du</a>,280
created in <a href="http://dupcit.com/1188980640">September 2009</a><br>281
</address>282
283
</body>284
</html>
更多专业前端知识，请上 【猿2048】www.mk2048.com
