文字阴影

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用支持使用级联样式表级别 3 (CSS3) text-shadow 属性在文本上添加投影效果。

text-shadow 属性

text-shadow 属性对指定的文本应用投影效果,它是在万维网联合会 (W3C) CSS 文本效果模块级别 3 中定义的。如果你熟悉 box-shadow 属性的语法,也就熟悉了 text-shadow 的语法,因为它们基本上相同。

属性描述

text-shadow

对特定文本应用一种或多种投影的逗号分隔阴影列表。每个阴影都由以下参数的空格分隔列表组成:

  • horizontal offset  必需。如果是正值,则绘制偏移到文本右侧的阴影;如果是负值,则绘制偏移到文本左侧的阴影。
  • vertical offset  必需。如果是正值,则绘制偏移到文本下方的阴影;如果是负值,则绘制偏移到文本上方的阴影。
  • blur distance  不允许使用负值。如果模糊值为零,则阴影边缘是锐利的。否则,值越大,阴影边缘就越模糊。
  • spread distance  如果是正值,则阴影形状以指定半径向各个方向扩展。如果是负值,则阴影会收缩。(注:可能不是所有浏览器都支持这个值。)
  • color  任何受支持的级联样式表 (CSS) 颜色值

 

text-shadow 属性的语法与 box-shadow 属性的语法相同,除非 text-shadow 属性不识别 inset 关键字。

以下示例通过使用较小的模糊值在指定文本的下方偏右的位置应用深灰色阴影:


.myselector 
{
...
  text-shadow: 0.1em 0.1em 0.15em #333;
}

当将该选择器应用于一个短文本块之后的效果如下所示:

应用了灰色阴影的文本“Internet Explorer 10”。

W3C 有一个名为 CSS 文本投影 的页面专门讲述 text-shadow 提示和示例。

API 参考

text-shadow

示例和教程

CSS Text-shadow 示例
如何使用 CSS 添加有趣的文本效果

有关 Internet Explorer 的 Test Drive 演示

实例演示:Text-shadow

IEBlog 文章

改用 IE10 中基于标准的 Web 图形
IE10 中的 CSS3 text-shadow

规范

CSS 文本效果模块级别 3:第 4 节

相关主题

背景和边框
掌握 CSS3:7 个不可错过的绝妙 text-shadow 示例
掌握 CSS3:文字阴影

 

 

显示:
© 2014 Microsoft