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