CSS - text-shadow

text-shadow 为文字添加阴影。

效果: shadow

demo

.black {
text-shadow: 0 0 6px #452d2d;
}
.gray {
text-shadow: 0 0 6px #BDC0BA;
}
.green {
text-shadow: 0 0 6px #1abc9c;
}

语法

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 
/* color | offset-x | offset-y | blur-radius */
text-shadow: #CCC 1px 0 10px; 
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;
text-shadow: inherit;

<offset-x> <offset-y>

这些长度值指定阴影相对文字的偏移量。
<offset-x> 指定水平偏移量,若是负值则阴影位于文字左边。 
<offset-y> 指定垂直偏移量,若是负值则阴影位于文字上面。
如果两者均为0,则阴影位于文字正后方(如果设置了<blur-radius> 则会产生模糊效果)。
可用单位请查看 <length>

<blur-radius>

这是 <length> 值。
如果没有指定,则默认为0。
值越大,模糊半径越大,阴影也就越大越淡(wider and lighter)。

W3C

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
期待你的评论