我们可以使用CSS的blur属性过滤器结合前面所说的使用CSS制作跨浏览器的图片模糊效果的方法来制作网页文字模糊效果。然而有一个更加简单实用和为更广泛浏览器支持的方法可以实现文字模糊效果：使用text-shadow属性。
我们首先要明确一点，在页面上使用文本模糊效果只是为了是某些效果更酷，切记不可滥用。例如可以在模态对话框中模糊一些不太重要的文字，以突出那些重要的文字。最好的做法还要为这些模糊文本添加动画过渡，在鼠标滑过时，显示清晰的文本。
我们将需要模糊的文字放入<span>元素里，然后使用text-shadow来对文字进行模糊。
span.spoiler { text-shadow: 0 0 8px #000; color: rgba(255,255,255,0); }
上面的代码使class为spoiler的<span>中的文字变得透明，只保留文字的text-shadow，从而模拟出一种文字模糊的效果。你可以通过text-shadow属性的第三个参数来调整文字模糊的效果。
添加对IE浏览器的支持
要在IE浏览器中获得相同的文字模糊效果，我们需要微软专用的blur滤镜。
span.spoiler {
text-shadow: 0 0 8px #000;
color: rgba(255,255,255,0);
filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
zoom: 1;
}
为屏幕阅读器添加暂停功能
如果用户是使用屏幕阅读器来浏览这个页面，这些文字模糊效果将不会有任何意义。文本语音阅读器将会阅读所有的文本，包括模糊的文本。我们应该在模糊的文本前添加一个暂停功能，这样可以使用户选择是否继续阅读这些被模糊的文本。我们可以使用CSS Speech Module中的pause-before属性来实现这个功能。
span.spoiler {
text-shadow: 0 0 8px #000;
color: rgba(255,255,255,0);
filter: DXImageTransform.Microsoft.Blur(pixelradius=2);
zoom: 1;
pause-before: 3s;
}
使模糊文本变得可读
正如前面所说的，应该为模糊文本添加一个变清晰可读的功能。我们可以通过下面的代码来简单的实现它：
span.spoiler:hover { text-shadow: none; color: #000; filter: none; }
这个方法可以在所有的浏览器上起作用，包括IE5.5+。
一个可用的替代方法
还有一种可用的替代方法可以实现文字模糊的效果，那就是将文字的颜色制作文等于或接近网页背景的颜色，在鼠标滑过文字时，将背景的颜色修改为别的颜色。
span.spoiler { color: #000; background #000; }
span.spoiler:hover { background: none; }
这种方法是一种视觉欺骗，通过假象制作一种文字模糊的效果。
