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

CSS3 应用01 - 文本阴影效果（兼容IE 7-9 Firefox Opera Chrome 等多浏览器）

2011-06-16 14:14 711 查看

郑重声明，如果引用，请注明出处：（原创博客园：天之子）

CSS3 提供一个文本阴影属性：text-shadow : color || length || lenth|| opacity

其中，第一个参数是颜色，第二个参数是阴影的水平延伸距离，第三个参数是阴影的垂直延伸距离，第四个参数是模糊效果的作用距离。支持设定多组效果。

例如：text-shadow: #333333 4px 5px 6px;

可是，IE 6-9 都不支持文本阴影的属性，只能使用 filter: glow / blur / shadow / dropshadow。。。来模拟文本阴影效果。

那么，我们难道就没有办法了吗？答案是可以的。

下面介绍几种办法：

如果你对日本人非常敏感，请只看第一种方法！这里只谈技术，不含民族情感。

1）多重文本阴影

实现原理：添加两个相同文本的 span，其中一个文本显示文本，一个作为阴影文本。

显示代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body
{
background-color: #cccccc;
}
h1
{
color: #ff9900;
font-family: 微软雅黑, 黑体;
font-size: 48pt !important;
font-weight: bold;
filter: Shadow(color=#fbfcfd, direction=135, dtrength=4);
text-shadow: #fbfcfd 4px 4px 4px;
padding-bottom: 2px;
}
</style>
</head>
<body>
<div><h1><span>基本业务框架系统</span></h1></div>
</body>
</html>

这种方法，显示的文本阴影有黑边，效果比不上前面两种。所以放到最后来讲。

这种方法，只要定义一个文本块，CSS 设置最简单，效果也是最差的。

实现评价：定义一个文本块，不用写JS代码。性能比 blur 过滤器稍差一些。

最后说明：无论哪一种方法，都没有浏览器内置支持的 CSS3 text-shadow 来的快，IE浏览器真的很垃圾。过滤器影响性能，尽管可用，但是慎用！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航