文字阴影-CSS Text-Shadow
<!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>
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
标签:
css
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！