zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Integer Inquiry
    dfs求最短路径
    5.E
    5.H
    5.C
    5.A
    5.J
    POJ
    POJ
    POJ
  • 原文地址:https://www.cnblogs.com/zoho/p/2520356.html
Copyright © 2011-2022 走看看