text-shadow

Avatar of Sara Cope
Sara Cope

DigitalOcean 提供适用于您旅程各个阶段的云产品。 立即开始使用 200 美元的免费积分!

p { 
  text-shadow: 1px 1px 1px #000;
}

您可以通过逗号分隔来应用多个文本阴影

p { 
  text-shadow: 1px 1px 1px #000, 
               3px 3px 5px blue; 
}

前两个值指定阴影偏移的长度。 第一个值指定阴影的水平距离,第二个值指定阴影的垂直距离。 第三个值指定模糊半径,最后一个值描述阴影的颜色

1. value = X 坐标
2. value = Y 坐标
3. value = 模糊半径
4. value = 阴影颜色

使用正数作为前两个值最终会将阴影放置在文本的水平右侧(第一个值)并将阴影放置在文本的垂直下方(第二个值)。

第三个值,模糊半径,是一个可选值,可以指定,但也可以不指定。 它是文本拉伸的像素量,会导致模糊效果。 如果您不使用第三个值,则它被视为您指定了零的模糊半径。

此外,请记住,您可以使用 RGBaHSLa 值作为颜色,例如,白色 40% 的透明度

p { 
  text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); 
}

示例

更多信息

浏览器支持

ChromeSafariFirefoxOperaIEAndroidiOS
2+1.1+3.5+9.5+10+任何任何