首页 > web前端开发 > CSS3 > CSS3:文字阴影知多少_WEB标准
2012
11-26

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

比来我因为要安装 Firebug 1.4 导致我不得不安装了 Firefox 3.5 ,所以很不小心地接触到了Wordpress后台那标致的文字暗影.也就是CSS中的text-shadow属性.所以今天我清算了一些资料,但愿可以对巨匠有所启发.

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

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

CSS3:文字阴影知多少_WEB标准 - 第1张  | 前端开拓者

 

最后编辑:
作者:zhoumeng
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!