css3新功能之(text-shadow实现)CSS3文字阴影效果

转载 2012年03月30日 17:24:34

css3新功能之(text-shadow实现)CSS3文字阴影效果

css3的新功能确实不错。在做静态网页模板的时候用css3可以省去很多代码

需要有像Photoshop中Text shadow的效果吗?CSS3 text-shadow属性可以给一些文本的所有字母上都加上阴影。对CSS3来说text-shadow属性并不是新事物,它开始在CSS2中推出,但CSS 2.1又取消了这个属性。

文字阴影效果

text-shadow是什么?

text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣. php程序员站

text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片.
目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的. php程序员站

接下来看看text-shadow的语法:

text-shadow:color length length length;

color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.其中任意一个值可以为零也可为空(将做默认处理)

举个例子:

text-shadow: -1px 2px 3px #ffb69a;

表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a

一些试验与demo

我做了点小小的试验,做成了一个 Demo页面 .为了让浏览器不支持text-shadow的用户看到阴影效果,请直接看以下截图(有位朋友说那个”火鸟”看起来像”鸡”):

原文地址:http://www.mianfeimoban.com/jianzhang_cyruanjian/cssjc/20120326/11102.html 欢迎转载!


相关文章推荐

了解CSS3的文字阴影效果 - Text Shadow effects

日期:2012-4-8  来源:GBin1.com 以往的CSS开发中,如果我们需要给文字添加阴影效果,基本只能将文字做成图片,而对于CSS3来说,我们只需要添加对应的text-shadow...
  • jjfat
  • jjfat
  • 2012年04月10日 15:04
  • 656

CSS3的文字阴影—text-shadow

前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴...

CSS3之文字阴影text-shadow

最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大...

css3 ——text-shadow使用阴影叠加出的燃烧的文字特效

text-shadow body { background:#000;} p { text-align:center; padding:24px; margin:0; font-family:...

CSS3的文字阴影—text-shadow

CSS3的文字阴影—text-shadow 作者:大漠 日期:2011-05-10 点击:15471  前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radiu...

CSS3之阴影-文字阴影text-shadow

CSS3中新增属性-阴影,可以做出很多漂亮的效果。   文字阴影text-shadow   text-shadow属性值的顺序:   text-shadow: h-...

css3 shadow实现的各种漂亮阴影效果

css3 shadow按钮阴影效果Demo代码,很多漂亮的纯CSS3实现图片的各种阴影效果代码,而且按钮的背景色处理的也挺个性,看上去很舒服,阴影的各类也挺多,下阴影、弧线阴影、立体阴影等,相信有一款...

《CSS3实战》笔记--文本阴影:text-shadow

text-shadow CSS3

css3 text-shadow设计文本阴影

css3 text-shadow设计文本阴影

css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

1.圆角效果(border-radius)
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3新功能之(text-shadow实现)CSS3文字阴影效果
举报原因:
原因补充:

(最多只允许输入30个字)