IT技术精粹[JiShuBu.Com]-倾力打造一流IT技术平台!
  • 登录
  • 注册
  • 设为首页
  • 加入收藏
  • 网站首页
  • IT风向标
  • 网站优化
  • Html
  • CSS
  • JavaScript
  • ASP
  • Php/Mysql
  • Flash
  • Ajax
  • 源码下载
  • 精美桌面
  • 供求信息
  • 超稳定100M虚拟主机只要100元,还送50M邮箱!
  • 文字广告招商中...
  • 会员注册 | 用户登录 | 我要投稿
  • 信息订阅
CSS 文字樣式技巧 (摘自一台湾网站,确实很强!) 您现在正在浏览:首页 > CSS > 
CSS 文字樣式技巧 (摘自一台湾网站,确实很强!)

作者:长风 发布时间:2008-03-08 23:17:46 来源:互联网
CSS 文字樣式技巧

 利用 CSS 樣式 (尤其是濾鏡效果), 我們可以讓單調的文字變化出更多的花樣, 以下是一些範例, 大家不妨試試看! 如果覺得不錯, 也可以修改相關的參數, 變成自己喜歡的樣子!

變色的文字
語法
<img src= width=0 height=0 onerror = "setInterval('font.style.color = Math.random()*255*255*255', 500)"> <font id="font">變色的文字</font>
執行結果
變色的文字
  
陰影文字 - 1 (預設值, 方向為 225 度)
語法
<div style="FILTER: shadow(color=6699FF); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#0000FF size=4>陰影文字 - 1</font> </div>
執行結果
陰影文字 - 1
  
陰影文字 - 2 (方向為 45 度)
語法
<div style="FILTER: shadow(color=6699FF,direction=45); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#0000FF size=4>陰影文字 - 2</font> </div>
執行結果
陰影文字 - 2
  
陰影文字 - 3 (方向為 135 度)
語法
<div style="FILTER: shadow(color=6699FF,direction=135); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#0000FF size=4>陰影文字 - 3</font> </div>
執行結果
陰影文字 - 3
  
陰影文字 - 4 (方向為 315 度)
語法
<div style="FILTER: shadow(color=6699FF,direction=315); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#0000FF size=4>陰影文字 - 4</font> </div>
執行結果
陰影文字 - 4
  
疊影文字
語法
<div style="FILTER: DropShadow(Color=CC99FF, OffX=3, OffY=3, Positive=1); WIDTH: 100%; HEIGHT: 100%"><FONT color=#000000 size=4>疊影文字</font></div>
執行結果
疊影文字
  
光暈文字
語法
<div style="FILTER: Glow(Color=000000, Strength=3); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#FFFF00 size=4>光暈文字</font> </div>
執行結果
光暈文字
  
發光文字
語法
<div style="FILTER: Glow(Color=000000, Strength=5); WIDTH: 100%; HEIGHT: 100%"> <FONT color=#FFFF00 size=4>發光文字</font> </div>
執行結果
發光文字
  
漸層底色文字
語法
<font style=width:100%; filter:glow(color=#336600,strength=50)> <center> <font color="#CCFFFF">漸層底色文字</font> </center>
執行結果
漸層底色文字
  
流星文字
語法
<font color="#FFFF00" size="5" face="標楷體" style=background:url(http://easylearn.bhes.tpc.edu.tw/item/advance/image/pic_star2.gif)>流星文字</font>
執行結果
流星文字
備註
若不欲直接指定圖片網址, 請下載下方的星星底圖至你的網站指定位置, 再將上述 background:url 改成該處
  
星星文字
語法
<font color="#990000" size="6" face="標楷體" style = background:url(http://easylearn.bhes.tpc.edu.tw/item/advance/image/pic_star.gif)>星星文字</font>
執行結果
星星文字
備註
若不欲直接指定圖片網址, 請下載下方的星星底圖至你的網站指定位置, 再將上述 background:url 改成該處
  
上下標文字
語法
正常字 <sup>上標字</sup><sub>下標字</sub>
執行結果
正常字 上標字下標字
  
【评论】【加入收藏夹】【大 中 小】【打印】【关闭】
※ 相关信息
 ·javascript小技巧  (2008-03-02 09:49:43)
 ·javascript技巧大全  (2008-03-02 09:46:59)
 ·JavaScript的方法和技巧  (2008-03-02 09:45:05)
 ·纯css实现无图圆角矩形块!  (2008-02-20 12:46:50)
 ·Flash与html 的一些实用技巧 Flash与html 的一些实用技巧  (2008-01-28 18:10:01)
 ·CSS 3 选择器解释  (2008-01-19 18:06:18)
 ·CSS超级技巧大放送  (2008-01-13 21:47:39)
 ·Html:简单实用 网页制作超级技巧  (2008-01-13 21:44:46)
 ·CSS Hack 汇总[千百度资料]  (2008-01-13 21:37:59)
 ·Ajax调试的小技巧  (2008-01-13 21:36:17)

发表评论
查看评论 
用户名: 密码:
验证码: 匿名发表
[注册帐号]
[控制面板]
[用户登陆]
[修改资料]
[用户收藏]
[我的状态]
[退出登陆]
 
文章搜索
     
    [添加文章]   [管理文章]
最新技术文档
    ·十天学会PHP之基础知识
    ·十天学会PHP之流程控制
    ·十天学会PHP之构建数据库
    ·十天学会PHP之连接数据库
    ·echo和print 的区别
    ·PHP生成随机字符串
    ·PHP取得文件后缀
    ·正则表达式经验谈
    ·PHP的Cookie技术介绍
    ·PHP数组排序
技术文档排行榜
    ·天气预报小偷,根据IP自动判断地址
    ·超经典计算机使用问题105答
    ·'AjaxPro'未定义错误的原因&javascript顺
    ·[初学者必读]网页制作之HTML基础知识
    ·DIV&CSS打造自动伸展三栏复合布局
    ·CSS网页布局入门教程:下拉及多级弹出式菜单
    ·阿里妈妈广告的投放技巧
    ·谁是网页浏览器引擎速度真正王者
    ·JavaScript:世界上误解最深的语言
    ·几种常用禁止修改输入框的方法
关于站点 - 广告服务 - 联系我们 - 免责声明 - 程序支持 - 网站地图 - 留言中心 - 返回顶部

Copyright © 2007-2008 www.Jishubu.com online services. All rights reserved. Template designed by laogui.
违法不良信息举报中心 津ICP备07002356号