CSS: 文字阴影

更新时间:2018-09-11 16:51:21

CSS level 3 有一种属性叫做"文字阴影," 是用来为有些文字的每个字母加上阴影. 在它最简单的形式里, 它看起来是像这样的:

阴影文字效果

p{text-shadow: 0.1em 0.1em #333}
它增加了一个相对于正常文本有一点向右(0.1em)和向下(0.1em) 暗灰色(#333)的阴影. 

多重阴影

你可以有多于一个的阴影. 通常来说, 那看起来有些奇怪:


p {text-shadow: 0.2em 0.5em 0.1em #999,
      -0.3em 0.1em 0.1em #666,
      0.4em -0.3em 0.1em #333}

阴影文字效果


但当有2个放置适当的深色和浅色阴影时, 效果可能是很有帮助的,灰灰还是很喜欢这个效果的,用的较多:


p1 {text-shadow: -1px -1px white, 1px 1px #333}

p2{text-shadow: 1px 1px white, -1px -1px #444}

阴影文字效果

阴影文字效果




霓虹发光

如果你把一个模糊阴影放在文字的正后方, 像是偏距为0时, 其效果则是创造一个周围会发光的字母. 如果单一的阴影不够强烈, 那就重复同样的阴影几次:

p1 {text-shadow: 0 0 0.2em #999;color:#999}
p2 {text-shadow: 0 0 0.2em #ccc, 0 0 0.2em #ccc;color:#ccc}
p3 {text-shadow: 0 0 0.2em #888, 0 0 0.2em #888,0 0 0.2em #888;color:#888}

阴影文字效果

阴影文字效果

阴影文字效果