CSS text-shadow属性

  发布时间:2009-06-26 18:05:18   作者:佚名   我要评论
文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发.

最近我因为要安装 Firebug 1.4 导致我不得不安装了 Firefox 3.5 ,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发.

首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的.

CSS text-shadow属性

text-shadow是什么?

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

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

接下来看看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的用户看到阴影效果,请直接看以下截图(有位朋友说那个”火鸟”看起来像”鸡”):

CSS text-shadow属性

如果你使用的是Firefox 3.1+,Safari等浏览器 可以看下么的演示代码


提示:您可以先修改部分代码再运行

为什么使用text-shadow:

  • 可以增强文字质感
  • 可以减少图片的使用,减少带宽支出
  • 随着Firefox 3.5支持text-shadow,不久很多人将可以看到你定义的阴影

不相信?请看看下面的截图,这是对http://tweetcc.com/网站分别在safari 4(win)与Firefox 3.0.11下所进行的截图.很明显在有text-shadow应用下整体文字层次感好了许多.

CSS text-shadow属性

其他例子

接下来我们继续看看一些有趣的text-shadow下的例子吧,首先看看 vikiworks 用text-shadow来显示程序代码.很多人都觉得这个效果很赞,没错,该网站用的就是css3属性.

CSS text-shadow属性

参考资料及常见问题

看完上面觉得不够,那么可以参考一下下面的文章:

问题有:

  • 如果使用了blur,也就是定义了阴影模糊半径,会导致页面在滚动时变慢.

转载请注明来源: http://www.ediyang.com/css3-text-shadow-why-and-how/

请留意:本文章旨在抛砖引玉引起大家对CSS3的兴趣.也比较侧重该属性呈现的效果,所以对该属性的技术性讲解及定义都有所偏差,请原谅.

相关文章

  • 纯CSS3代码实现文字描边

    CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果,本文给大家介绍纯CSS3代码实现文字描
    2016-04-25
  • 简单掌握CSS3将文字描边及填充文字颜色的方法

    这篇文章主要介绍了CSS将文字描边及填充文字颜色的方法,分别为text-stroke和text-fill-color属性的使用方法讲解,注意浏览器的兼容问题,需要的朋友可以参考下
    2016-03-07
  • CSS3利用text-shadow属性实现多种效果的文字样式展现方法

    下面小编就为大家带来一篇CSS3利用text-shadow属性实现多种效果的文字样式展现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-25
  • CSS3文本阴影text-shadow属性详解

    下面小编就为大家带来一篇关于CSS3文本阴影text-shadow属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-08-08
  • CSS3实现千变万化的文字阴影text-shadow效果设计

    这篇文章主要介绍了CSS3实现千变万化的文字阴影text-shadow效果设计的相关资料,感兴趣的小伙伴们可以参考一下
    2016-04-26
  • CSS3 text-shadow实现文字阴影效果

    这篇文章主要介绍了CSS3 text-shadow实现文字阴影效果的方法,丰富文字排版布局美化效果,感兴趣的小伙伴们可以参考一下
    2016-02-24
  • 举例详解CSS中的text-shadow文字阴影效果使用

    这篇文章主要介绍了举例详解CSS中的text-shadow文字阴影效果使用,text-shadow的运用是CSS入门学习中的基础知识,需要的朋友可以参考下
    2015-08-19
  • 用CSS的text-shadow制作超炫文字效果全攻略

    这篇文章主要介绍了用CSS的text-shadow制作超炫文字效果全攻略,文中给出了诸多阴影效果示例,超级推荐!需要的朋友可以参考下
    2015-07-23
  • CSS3的文字阴影—text-shadow的使用方法

    前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法,需要了解的朋友可以详细
    2012-12-25
  • CSS3基础(RGBa、text-shadow、box-shadow、border-radius)

    本文介绍CSS 3部分新属性基础,包括RGBa、text-shadow、box-shadow、border-radius。这些属性通常用来增强网页布局和美誉度。(译者注:在支持CSS3的浏览器如Firefox、Safa
    2012-11-13

最新评论