CSS实现文字阴影

想在自己博客的首页的抬头图片上添加一句引言,结果发现在很多色调复杂的图片上几乎看不见于是就找了运用CSS实现文字阴影效果的属性,就是text-shadow。

text-shadow是什么?

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

text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片。
目前支持的浏览器包括Firefox,Safari,Opera,chrome等,基本上不太旧的都可以(数据可能有偏差)。当然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

<图找不到了,哭哭>

以下代码实现如上图所示的效果,背景无视之:

text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, 2px -15px 11px #FF8800, 2px -25px 18px #FF2200; color:#000; 
  1. 一树小草说道:
    回来考古,顺便怀旧,嗯嗯。

回复 一树小草 取消回复

电子邮件地址不会被公开。必填项已用 * 标注