IEBlog：IE10下CSS3的文本阴影（CSS3 text-shadow）

最新推荐文章于 2024-05-26 09:38:20 发布

yulongli

最新推荐文章于 2024-05-26 09:38:20 发布

阅读量2.3k

点赞数

分类专栏：浏览利器文章标签： css ie distance 浏览器 web开发 internet

浏览利器专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Windows开发者预览版下的IE10对CSS3的 text-shadow支持硬件加速。Text-shadow是Web开发者最希望有的功能之一。以前如果不在文字上内嵌图像，此功能将很难甚至是根本无法以一种标准友好的方式实现。

IE10下的Text-Shadow
顾名思义，text-shadow是个css属性，用于在文本下面画阴影。看一个小例子吧：

应用此功能，可以将文本加强显示，增加立体感。某些场景下，尤其是背景有颜色或是图片，text-shadow可用来增加对比以提高可读性。作为我们的承诺，目前为止我们已经向CSS3文本测试套件提交了10个测试用例，通过率是9/10。

左边IE9，邮编IE10，两者有微妙的不一样

左边ie9，右边ie10

像 text-shadow规范中说的，IE10对box-shadow和text-shadow中的<shadow>提供的定义是相同的，只是在text-shadow中不支持“inset”关键字。text-shadow中需要定义5个参数：颜色，X坐标，Y坐标，模糊半径（blur radius）和传播距离（spread distance，文章的后面有详细介绍）。目前只有IE10支持spread distance。

如何用Text-Shadow

最基本的text-shadow只需要x坐标和y坐标

	.shadow1 { color: black; text-shadow: 2px 2px; }

很多時候，您可能会制定阴影的颜色

	.shadow2 { color: black; text-shadow: #87CEEB 1px 3px; }

颜色参数放在shadow的前面或是后面都可以。还可以增加blur radius属性，它通过高斯模糊算法描述阴影模糊的量值。

	.shadow3 { color: black; text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); }

当然还可以制定spread distance。正数表示引用向外发散的像素值，负数表示阴影向内收缩的像素值。

	.shadow4 { color: black; text-shadow: skyblue 0px 0px 0px 4px; }

如果照葫芦画瓢，spread正数值被模仿的写成0，阴影效果就有问题了，实现这种效果会相当复杂，可能会导致性能下降，引用效果的质量也会变低。

	.shadow4_nospread { color: black; text-shadow: skyblue 0px 2px, skyblue 2px 0px, skyblue -2px 0px, skyblue 0px -2px, skyblue -1.4px -1.4px, skyblue 1.4px 1.4px, skyblue 1.4px -1.4px, skyblue -1.4px 1.4px; }

上面的这种效果如果采用spread实现就简单多了。

	.shadow5 { text-shadow: 5px 5px 2px -2px #9966CC; }

上面列举到的5个参数只是描述了一种样式的阴影。text-shadow支持很多中阴影类型。阴影可以分为好几层，从前到后，都有不同的表示。
下面这个例子最底下层是个红色阴影，之上是橙色阴影，再往上是个黃色的，最顶上是个部分透明的白色阴影。

	.shadow6 { text-shadow: rgba(255, 255, 255, .5) 1px 1px, yellow 2px 3px, rgba(255, 153, 0, .7) 3px 6px, rgba(255, 0, 0, .5) 4px 8px; }

“spread”参数和互操作性
目前，只有IE10支持spread distance属性，原因请参考W3C规范。规范中对text-shadow的各个属性有较详细的介绍。

如果以互操作性作为目标，请牢记，拥有spread的text-shadow在其他不支持的浏览器上面会被无效解析。
所以得做好两手准备，兼容不同的浏览器，即使浏览器不支持spread，也可以正常展示text-shadow。

	.shadow7 {
		color: black;
		text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread distance */
		text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with the full spec */
	}

spread可以产生很多效果。我们欢迎您反馈关于“spread distance”的问题，我们会与CSS工作組一起明晰此规范。

在过去的基础上修改
老版本的ie浏览器上有专门用于产生阴影的属性，比如 DXImageTransform.Microsoft.Shadow,DXImageTransform.Microsoft.DropShadow, DXImageTransform.Microsoft.Glow, 和DXImageTransform.Microsoft.Blur。现在ie10上全部都用text-shadow实现。不仅仅是因为text-shadow是符合标准的，硬件加速对其性能的提升也是很显著的。

浏览器兼容
如果浏览器不支持text-shadow，网站需要提供降级服务。
现在的网站，text-shadow还是很轻量级的装饰。不过text-shadow也可以实现出很炫的展示效果。

如果你想做好不支持text-shadow的浏览器兼容，需要用CSSOM的textShadow进行检测。

	if (typeof document.body.style.textShadow == 'undefined') {
		// text-shadow is not supported
		document.body.style.color = 'black';
	}
	else {
		// text-shadow is supported
		document.body.style.color = '#FFFFCC';
		document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';
	}

尝试一下text-shadow
使用多个阴影和调整不同的参数，可以创造出一些有趣的效果
以下是我的几个有趣简单的实例

你现在可以将text-shadow、WOFF字体和输入元素在CSS3中结合起來显现转换和动画（CSS3 Transitions and Animations）。
如果你的浏览器支持CSS3 Transitions and Animations以及text-shadow，看看这个例子吧。也看看其源代码是怎么写的。

赶紧在IE10下面尝试一下text-shadow去发挥你的创意吧。 IE Test Drive下有个demon： Hands On: text-shadow ，可以通过手工改变参数来展示不同的效果。

—Jennifer Yu, Program Manager, Internet Explorer

原文地址：http://blogs.msdn.com/b/ie/archive/2011/09/29/css3-text-shadow-in-ie10.aspx 2011-9-30