行使CSS3实现质感阴影笔墨的要领

　　猛火建站学院(LieHuo.Net)讯 最近我由于要安装Firebug 1.4导致我不得不安装了Firefox 3.5，以是很不警惕地打仗到了Wordpress靠山那大度的笔墨阴影。也就是CSS中的text-shadow属性。以是本日我清算了一些资料，但愿可以对各人有所开导。

　　起首我们看看wordpress 2.8靠山行使了text-shadow的部门(绿色箭头)。认为怎么样？没错，这些都是CSS3属性，而不是图片做成的。

图1

　　text-shadow是什么?

　　text-shadow早在CSS2中已经存在,而此刻CSS3也筹备将他插手个中。而且因为一向以来只有Safari支持这个属性以是我们很少见到真正的应用，直到最近Firefox 3.5对它的支持然从头唤起了人们对它的乐趣。liehuo.net

　　text-shadow可以支持给笔墨加上阴影,这样我们在计划时可以操作css3属性增进笔墨的质感而不消行使任何图片。今朝支持的赏识器有Firefox 3.1+,Safari 3+,Opera 9.5+等当代赏识器(数据也许有毛病)。虽然IE家属是无法支持的。JZquan.COm

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

　　color：颜色；length别离按次序指“X轴偏向长度 Y轴偏向长度 阴影恍惚半径”

　　正值在X轴暗示向右，负值暗示向左。同样的原理Y轴负值是暗示向上。个中恣意一个值可觉得零也可为空(将做默认处理赏罚)

　　举个例子：

　　暗示X轴偏向阴影向左1px，Y轴偏向阴影向下2px，而阴影恍惚半径3px，颜色为 #ffb69a

一些试验与demo

　　我做了点小小的试验，做成了一个Demo页面。为了让赏识器不支持text-shadow的用户看到阴影结果，请直接看以下截图(有位伴侣说谁人“火鸟”看起来像“鸡”)：

图2

　　假如你行使的是Firefox 3.1+,Safari等赏识器,那请直接点Demo演示

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!