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

CSS3 应用02 - 嵌入字+立体字+霓虹灯 等文本效果

2011-06-22 15:31 344 查看
郑重声明，如果引用，请注明出处：（原创 博客园：天之子）

CSS3 应用01 - 文本阴影效果（兼容IE 7-9 Firefox Opera Chrome 等多浏览器）介绍了文本阴影的简单应用。

下面，常见的文本特效：嵌入字、立体字、霓虹灯等文本效果，提供完整的 CSS 代码。

1、嵌入字

显示代码

<!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: #535353;
}
h1
{
color: #00f;
font-family: 微软雅黑;
font-size: 48pt;
font-weight: bold;
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;
}
</style>
</head>
<body>
<div>
<h1>
<span>基本业务框架系统</span>
</h1>
</div>
</body>
</html>


以上代码支持 Firefox、Chrome、Opera 等 CSS3 的浏览器，不支持 IE 系列浏览器。

如果要问 IE 系列浏览器怎么办？对不起，凉拌！

微软的 IE 浏览器真的是万恶之源，尤其是政府机关还在用 IE 6，已经严重影响了程序员的发展，历史的车轮在滚滚前进，我们的程序员的脚步却在这种无奈中：停留太久，太久。。。还将继续下去啊。。。

顺便说一句：博客园的插入代码真的很垃圾，还是我不会用？只有一个“显示代码”选项+显示行号，至少也得有个显示纯文本、打印之类的吧？

有的读者提出去掉行号，以后我的代码尽量不添加行号，方便复制粘贴使用。谢谢关注！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航