您的位置：首页 > Web前端 > CSS

DIV+CSS：实现文本阴影效果示例；

2012-02-21 14:31 736 查看
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航