CSS3:文字阴影知多少_WEB标准

CSS3:文字阴影知多少_WEB标准

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的用户看到暗影效不美观,请直接看以下截图(有位伴侣说阿谁”火鸟”看起来像”鸡”):