CSS3-text-shadow

随笔记录, by admin.

一. text-shadow介绍
属性值: none | [, ] *
初始值: none
适用于: 所有元素以及生成的内容
可继承: 否
百分比: 不支持
媒介: 视觉

二. 对shadow的说明
a. shadow的形式有两种:
(1) [<颜色><水平偏移><纵向偏移><模糊半径>]
(2) [<水平偏移><纵向偏移><模糊半径><颜色>]

b. <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色; 当<模糊半径>未指定时, 半径值为0;

c. shadow可以是逗号分隔的列表, 如:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;

d. 阴影效果会按照shadow list中指定的顺序应用到元素上;

e. 这些阴影效果有可能相互重叠, 但不会叠加文本本身;

f. 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.
三. 测试实例

xhtml:

I have shadow effect!!!

css:
.para1 {
text-shadow: 2px 2px 2px #333;
}
.para2 {
text-shadow: #333 2px 2px 2px;
}

四. 测试环境
OS –> winXP
Browsers –> IE6+, FF 3.0.11, FF 3.5, Opera 9.64, Opera 10 beta 2, Safari 4, Chrome 2.0.172

五. 测试结果

a. IE6 -> 8, FF 3.0.11
不支持

b. FF 3.5, Opera 9.64+, Safari 4, Chrome 2
支持

CSSWEBSITE