CSS3 的文字阴影效果

使用 CSS3 的 text-shadow 属性,可以给网页某元素内的文本添加阴影效果。例如:

text-shadow: 2px 2px 1px #afb7cc;

其中前两个参数分别表示阴影文本相对于原始文本向右和向下的位移。第 3 个可选参数表示模糊位移,在这个例子中,阴影文本将和向右和向下模糊地移动 1px 后的结果叠加,从而得到稍微模糊的阴影效果。而第 4 个可选参数指明阴影文本的颜色。最后一个参数也可以放在最前面。

当然,也可以文本指定多个阴影效果,只需将多个阴影效果用逗号隔开就可以了。例如:

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

对于非黑色的文本,上面的例子它的四周添加了黑色的轮廓(当然,这种轮廓是不够完美的),查看实例

参考资料:
[1] CSS Text Level 3 - Text Shadows
[2] CSS: text shadows
[3] CSS3 text-shadow Property
[4] text-shadow - MDN

原文地址:https://www.cnblogs.com/zoho/p/2520356.html