WonderCSS

CSS3文字投影效果Text-Shadow

text-shadow 文字投影是CSS3的新效果,目前除了IE6-8不支持以外,几乎所有新版本的浏览器全都支持。所以在网站的设计完成后,可以再使用些CSS3来润色一下。

text-shadow 只对文字或容器内的文字生效。他的使用和参数物体投影 box-shadow 一样,在用途上来说通常都是用来修饰段落文字,或提升标题文字特效。

文字阴影Text-Shadow的标准写法如下:

text-shadow:1px 1px 0 rgba(0,0,0,0.4);

参数直观意思为: 文字阴影:X轴距离 Y轴距离 扩散长度 RGB色值透明度 (R,G,B,A);

它还可以写做:

text-shadow:1px 1px 0 #000000;

参数直观意思为: 文字阴影:X轴距离 Y轴距离 扩散长度 16进制颜色值(HEX);

这种写法将阴影的颜色由RGB改为16进制颜色值(HEX),但却不具备透明度效果。

值得一提的是 Text-Shadow 也同 Box-Shadow 一样有着叠加写法:

text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);

效果如图:

text-shadow文字阴影

By 于湛 发布于 2013.02.4 8,225 次浏览

CSS3文字投影效果Text-Shadow》上有1条评论

  1. Pingback引用通告: 详解CSS3物体投影效果Box-Shadow | Wonder CSS

发表评论

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