CSS3网页制作实例:实现网页文字渐变内发光投影

具体做法是.text设置好高光底色#c60000，.text:after用蒙版，由上至下从透明到不透明拉垂直渐变蒙版，颜色设置深色点 的#ea0000，然后.text:before设置color:rgba(0,0,0,0);  透明因为要做内发光，然后设置投影为text-shadow:0px 0px 5px rgba(110,0,0,0.8);  更深的一个颜色#6e0000，带点透明这样融合起来效果会好些，调节内发光效果，其中你会发现各个层都有写 text-shadow，但是半径很小，因为网页文字是带锯齿的，这样处理的话，文字周围有了些许投影羽化了边界，看起来就柔和了，有起到消除锯齿的作用，最终效果也就出来了，不过因为FF不支持蒙版mask所以只能在webkit内核下的浏览器才能看到渐变效果，FF就没有了渐变效果，如图：

没有蒙版效果，所以是最上面.text:before的颜色，不过内发光，投影这些都还在，效果还勉强可以接受，至于悲剧IE不提也罢……

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!