<html>
<head>
<title>实现文本阴影效果示例</title>
<style type="text/css">
#tbshm {
border: solid gray 8px;
padding: 10px;
font: italic 23px sans-serif;
width: 50%;
}
</style>
</head>
<body>
<div style="font: bold 56px sans-serif;"> <!-- 文本大的效果明显过; -->
<span style="position: relative;">
<span style="position: absolute; top:5px; left:5px; color: #ccc;">Shadow</span>
<span style="position: absolute; top:4px; left:4px; color: #444;">Shadow</span>
<span style="position: absolute; top:3px; left:3px; color: #888;">Shadow</span>
<span style="position: absolute; top:2px; left:2px; color: #888;">Shadow</span>
<span style="position: absolute; top:1px; left:1px; color: #444;">Shadow</span>
<span style="position: absolute; top:0px; left:0px; color: #444;">Shadow</span>
<span style="position: relative;">Shadow</span>
</span>
| NOShadow
</div>
<p id="tbshm">
<b>特别说明:</b>CSS2规范包含text-shadow属性,用来生成文本下方的高级的下拉阴影效果。这个属性
由Safari浏览器实现,但是并没有被其他的主要浏览器厂商所实现,并且它已经从CSS2.1中移除,将放到
CSS3中考虑。出于这种情况,就有上边所示的解决方法。
</p>
</body>
</html>
<head>
<title>实现文本阴影效果示例</title>
<style type="text/css">
#tbshm {
border: solid gray 8px;
padding: 10px;
font: italic 23px sans-serif;
width: 50%;
}
</style>
</head>
<body>
<div style="font: bold 56px sans-serif;"> <!-- 文本大的效果明显过; -->
<span style="position: relative;">
<span style="position: absolute; top:5px; left:5px; color: #ccc;">Shadow</span>
<span style="position: absolute; top:4px; left:4px; color: #444;">Shadow</span>
<span style="position: absolute; top:3px; left:3px; color: #888;">Shadow</span>
<span style="position: absolute; top:2px; left:2px; color: #888;">Shadow</span>
<span style="position: absolute; top:1px; left:1px; color: #444;">Shadow</span>
<span style="position: absolute; top:0px; left:0px; color: #444;">Shadow</span>
<span style="position: relative;">Shadow</span>
</span>
| NOShadow
</div>
<p id="tbshm">
<b>特别说明:</b>CSS2规范包含text-shadow属性,用来生成文本下方的高级的下拉阴影效果。这个属性
由Safari浏览器实现,但是并没有被其他的主要浏览器厂商所实现,并且它已经从CSS2.1中移除,将放到
CSS3中考虑。出于这种情况,就有上边所示的解决方法。
</p>
</body>
</html>