CSS3 应用02 - 嵌入字+立体字+霓虹灯 等文本效果
郑重声明，如果引用，请注明出处：（原创 博客园：天之子）
CSS3 应用01 - 文本阴影效果（兼容IE 7-9 Firefox Opera Chrome 等多浏览器）介绍了文本阴影的简单应用。
下面，常见的文本特效：嵌入字、立体字、霓虹灯等文本效果，提供完整的 CSS 代码。
1、嵌入字
显示代码
1 <!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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <style type="text/css">
7 body
8 {
9 background-color: #535353;
10 }
11 h1
12 {
13 color: #353535;
14 font-family: 微软雅黑;
15 font-size: 48pt;
16 font-weight: bold;
17 text-shadow: 0px -2px 0px #0D0D0D, 0px 2px 3px #666666;
18 }
19 </style>
20 </head>
21 <body>
22 <div>
23 <h1>
24 <span>基本业务框架系统</span>
25 </h1>
26 </div>
27 </body>
28 </html>
2、立体字
显示代码
1 <!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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <style type="text/css">
7 body
8 {
9 background-color: #535353;
10 }
11 h1
12 {
13 color: #00f;
14 font-family: 微软雅黑;
15 font-size: 48pt;
16 font-weight: bold;
17 text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #bbb, 3px 3px 0 #aaa, 4px 4px 0 #999, 5px 5px 0 #666, 6px 6px 1px #000, 0 0px 3px #000, 0 1px 3px #000, 0 3px 5px #000, 0 5px 10px #000, 0 5px 20px #000;
18 }
19 </style>
20 </head>
21 <body>
22 <div>
23 <h1>
24 <span>基本业务框架系统</span>
25 </h1>
26 </div>
27 </body>
28 </html>
显示代码
1 <!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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <style type="text/css">
7 body
8 {
9 background-color: #535353;
10 }
11 h1
12 {
13 color: #00f;
14 font-family: 微软雅黑;
15 font-size: 48pt;
16 font-weight: bold;
17 text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00ff11, 0 0 70px #00ff11, 0 0 80px #00ff11, 0 0 100px #00ff11, 0 0 150px #00ff11;
18 }
19 </style>
20 </head>
21 <body>
22 <div>
23 <h1>
24 <span>基本业务框架系统</span>
25 </h1>
26 </div>
27 </body>
28 </html>
以上代码支持 Firefox、Chrome、Opera 等 CSS3 的浏览器，不支持 IE 系列浏览器。
如果要问 IE 系列浏览器怎么办？对不起，凉拌！
微软的 IE 浏览器真的是万恶之源，尤其是政府机关还在用 IE 6，已经严重影响了程序员的发展，历史的车轮在滚滚前进，我们的程序员的脚步却在这种无奈中：停留太久，太久。。。还将继续下去啊。。。
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架