HTML5+CSS3 文字阴影和阴影位移
text-shadow 属性可以撑持给文字加上阴影,这样在设计时可以通过 CSS 3 设置
增添文字的质感,而不用利用任何图片。
语法:
text-shadow : none | <length> none | [<opacity>, ] * <opacity>
或者
text-shadow :none | <color> [, <color> ]*
上述语法的参数含义如下:
color 指定颜色。
length 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
opacity 由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用
距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0。
通过上述 text-shadow 属性,可以添加阴影。而最重要的阴影不能与文本内容相
重叠,否则将无法显示出阴影效果。
因此,用户需要设置阴影的位移距离,即是阴影与文本内容之间的距离。
语法:
text-shadow:Apx Bpx #color;
其中,参数 A 值是指文本 X 轴上的位移;而 B 值指文本 Y 轴上的位移,color
指阴影的颜色值。
提示:
px 就是表示 pixel,像素,是屏幕上显示数据的最基本的
点。
例如,给<h1>标签添加文字阴影,如:
h1 {text-shadow: 0.1em 0.1em #333;}
上述样式中,前面 0.1em 表示 X 轴的位移、而后面的 0.1em 表示 Y 轴值的位移,
其颜色为#333。
提示:
em 即%,在 CSS 中,1em=100%,是一个比率,结合
CSS 继承关系使用,具有灵活性。em 是相对长度单位,
相对于当前对象内文本的字体尺寸。如当前对行内文本
的字体尺寸未被人为设置,则相对于浏览器的默认字体
尺寸。
下面通过示例,来了解一下阴影效果。