点评:使用html5的text-shadow实现没有模糊效果,有模糊效果,阴影叠加的具体代码如下,想学习的朋友可以了解下哈,希望对大家学习html5有所帮助
hpfHTML5中文学习网 - HTML5先行者学习网
hpfHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" hpfHTML5中文学习网 - HTML5先行者学习网
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> hpfHTML5中文学习网 - HTML5先行者学习网
<html xmlns="http://www.w3.org/1999/xhtml"> hpfHTML5中文学习网 - HTML5先行者学习网
<head> hpfHTML5中文学习网 - HTML5先行者学习网
<title></title> hpfHTML5中文学习网 - HTML5先行者学习网
<style type="text/css"> hpfHTML5中文学习网 - HTML5先行者学习网
/*<![CDATA[*/ hpfHTML5中文学习网 - HTML5先行者学习网
#text hpfHTML5中文学习网 - HTML5先行者学习网
{ hpfHTML5中文学习网 - HTML5先行者学习网
text-shadow:2px 2px 0px orange; hpfHTML5中文学习网 - HTML5先行者学习网
} hpfHTML5中文学习网 - HTML5先行者学习网
#text1 hpfHTML5中文学习网 - HTML5先行者学习网
{ hpfHTML5中文学习网 - HTML5先行者学习网
text-shadow:2px 2px 5px orange; hpfHTML5中文学习网 - HTML5先行者学习网
} hpfHTML5中文学习网 - HTML5先行者学习网
#text2 hpfHTML5中文学习网 - HTML5先行者学习网
{ hpfHTML5中文学习网 - HTML5先行者学习网
text-shadow:2px 2px 5px orange,-2px 2px 5px green; hpfHTML5中文学习网 - HTML5先行者学习网
} hpfHTML5中文学习网 - HTML5先行者学习网
/*]]>*/ hpfHTML5中文学习网 - HTML5先行者学习网
</style> hpfHTML5中文学习网 - HTML5先行者学习网
</head> hpfHTML5中文学习网 - HTML5先行者学习网
<body> hpfHTML5中文学习网 - HTML5先行者学习网
<div id="text"> hpfHTML5中文学习网 - HTML5先行者学习网
没有模糊效果 hpfHTML5中文学习网 - HTML5先行者学习网
</div>hpfHTML5中文学习网 - HTML5先行者学习网
hpfHTML5中文学习网 - HTML5先行者学习网
<div id="text1"> hpfHTML5中文学习网 - HTML5先行者学习网
有模糊效果 hpfHTML5中文学习网 - HTML5先行者学习网
</div>hpfHTML5中文学习网 - HTML5先行者学习网
hpfHTML5中文学习网 - HTML5先行者学习网
<div id="text2"> hpfHTML5中文学习网 - HTML5先行者学习网
阴影叠加 hpfHTML5中文学习网 - HTML5先行者学习网
</div>hpfHTML5中文学习网 - HTML5先行者学习网
hpfHTML5中文学习网 - HTML5先行者学习网
</body> hpfHTML5中文学习网 - HTML5先行者学习网
</html> hpfHTML5中文学习网 - HTML5先行者学习网
hpfHTML5中文学习网 - HTML5先行者学习网