快捷搜索:

CSS3 应用01 - 文本阴影效果(兼容IE 7-9 Firefox Ope

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

此中,第一个参数是颜色,第二个参数是阴影的水平延伸间隔,第三个参数是阴影的垂直延伸间隔,第四个参数是隐隐效果的感化间隔。支持设定多组效果。

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

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

那么,我们难道就没有法子了吗?谜底是可以的。

下面先容几种法子:

假如你对日本人异常敏感,请只看第一种措施!这里只谈技巧,不含夷易近族感情。

1)多重文本阴影

实现道理:添加两个相同文本的 span,此中一个文本显示文本,一个作为阴影文本。

1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2html xmlns="http://www.w3.org/1999/xhtml">

3head>

4meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

5title>title>

6style type="text/css">

7body

8{

9background-color: #cccccc;

10}

11h1

12{

13color: #ff9900;

14font-family: 微软雅黑, 黑体;

15font-size: 48pt !important;

16font-weight: bold;

17text-shadow: #fbfcfd 4px 4px 4px;

18padding-bottom: 2px;

19}

20.ielte9 > h1 > span

21{

22position: absolute;

23color: #ff9900;

24}

25.ielte9 > h1 > span.shadow

26{

27display: inline-block;

28zoom: 1;

29color: #fbfcfd;

30filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=4);

31}

32style>

33head>

34body>

35[if lte IE 9 ]>

基础营业框架系统基础营业框架系统

-->

36[if (gt IE 9)|!(IE)]>-->div>h1>span>基础营业框架系统span>h1>div>![endif]-->

37body>

38html>

您可能还会对下面的文章感兴趣: