使用CSS3为你的文字添加阴影效果

Saturday, August 22, 2009 吉光片羽 1

之前介绍过如何用JQuery实现文字阴影效果,没办法,那是被逼的。谁让你还用着IE浏览器呢?在大家都积极参与到抵制IE6的热潮之中时,请不要忘了,它的另外两个弟弟也已经跟不上时代了。所以,恳请你尝试一下吧,不要老是忠于KFC,M兄推出的新品也是层出不穷的。更何况在国内,浏览器不只是IE和Firefox两家,你现在可以随上用上的还有谷歌的Chrome,苹果的Safari,以及我也不知道是谁家孩子的Opera。

没错,今天就来说说,如何利用Apple Safari 3、Firefox 3.0.5、Google Chrome 1、Opera 9来轻松实现文字阴影效果!

text-shadow: x y blur color;

或许你在使用Dreamweaver的时候已经发现了这个属性,这是一个CSS3属性,所以,在将来,它会被通用的。
参数分别表示阴影的左右和上下方向的距离,模糊程度以及色彩。比如,要实现一个右下方一个像素的阴影,灰色的文字,黑色的阴影,即为:

color:#999;
text-shadow:1px 1px 0 #000; /*其中的0可以不写*/


如果要实现一个Photoshop中的描边效果,该怎么办呢?别担心,这也很简单!下面就通过实例来说明,注意,你必须使用以上提到的三个浏览器及其版本才能看到效果。
HTML :\ Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行 运行此代码
原因很简单,text-shadow允许你同时使用N次参数,通过使用英文逗号分隔,便可以实现不同方向,不同模糊程度,不同色彩的阴影了。

很有意思吧?赶紧利用起来吧!

点击这里获取该日志的TrackBack引用地址

日志标签: css  文字  阴影  教程  原创  

已有人对此文发表了评论

  1. 引用该评论 t 4/19/2010 4:07:03 AM 回复
    還是這個靠譜
    IE/FF 2個一起寫上咯 沒辦法

发表评论:

邮箱网址为选填;若您注册了GRAVATAR,请填写邮箱(不会公开),否则最好不填,您可在提交评论前选择表情头像;点击他人头像可引用其评论。插入UBB

About me

Name: KandyTang
Age: 20+
Location: Guilin, China
QQ: 121885959
Email: KandyT@qq.com

My Works

中文酷博聚合 汽车手绘·视频·教程 史努比(中文)网 免费的PJBlog皮肤 淘宝创意导购 桂林{摄影}品牌

Gallery

Unnamed Album

Unnam... (4)

复线文字LOGO设计

复线文字L... (10)

订书钉的创意-微型城市

订书钉的创... (4)

2010元宵烟火

2010元宵烟火 (7)

国外贺卡设计欣赏

国外贺卡设计欣赏 (20)