CSS学习笔记：text-shadow

概述

text-shadow 为文字添加阴影。

• 可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。
• 要为每个阴影指定相对文字的偏移量，可选的颜色及模糊半径。
• 多个阴影从前往后叠加，第一个阴影在最前面。
• 可以应用在::first-line和::first-letter伪元素上

语法

text-shadow:offset-x | offset-y | blur-radius | color 

• offset-x ,offset-y：必选。这些长度值指定阴影相对文字的偏移量。
  
  • offset-x指定水平偏移量，若是负值则阴影位于文字左边。
  • offset-y 指定垂直偏移量，若是负值则阴影位于文字上面。

如果两者均为0，则阴影位于文字正后方（如果设置了 blur-radius 则会产生模糊效果)。

• blur-radius：可选。代表模糊半径，如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡
• color：阴影的颜色。可以在偏移量之前或之后指定。

例子

.text-shadow {
   text-shadow: rgba(0,0,0,0.5) 0 -2px 2px;
}

多阴影：

.text-shadow {
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
}