【问题标题】:Add the Shadow effect to fonts using CSS使用 CSS 为字体添加阴影效果
【发布时间】:2010-11-10 12:38:38
【问题描述】:

大家好, 我再次需要你的帮助:D

是否可以仅使用 CSS 将阴影效果添加到 HTML 中的文本?我正在开发一个有很多按钮的项目,我需要找到一种方法来在不使用图像的情况下将阴影效果添加到其中的文本中,并与最常用的浏览器兼容。我尝试在 CSS 中使用“text-shadow”属性,但没有成功。

谢谢

【问题讨论】:

    标签: html css fonts shadow


    【解决方案1】:

    是的,语法如下:

    text-shadow: 2px 2px 2px #000;
    

    一般:

    text-shadow: x y blur color;
    

    以及我找到的页面的链接:http://www.css3.info/preview/text-shadow/。

    【讨论】:

    • 您不需要前缀。 text-shadow 是 CSS2.1,而不是 3,这就是不需要供应商前缀的原因。甚至您链接到的页面也是如此。
    • Opps,我的错误,我将前缀与 box-shadow 混淆了。感谢您指出这一点。
    【解决方案2】:

    是的。你可以通过谷歌找到你的问题的几个答案,但这是最好的答案之一:http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/

    【讨论】:

      【解决方案3】:

      由于 IE 仍然是最常用的浏览器,恐怕答案是否定的。

      但是,如果您愿意放弃仅css的要求,您可以使用例如this jQuery plugin。

      【讨论】:

        【解决方案4】:

        虽然已经回答了这个问题,但我认为值得补充的是,可以使用以下filters 添加对 IE8 的支持:

        filter: glow(color=#ffff00,strength=3);
        filter: dropshadow(color=#ffff00,offX=5,offY=5);
        

        不幸的是,这似乎只在如果元素具有display: block; 和定义的height(或)width; 或元素有position: absolute;,这有点不太妙。

        为此引用我的来源:Text-shadow, at: http://www.howtocreate.co.uk/textshadow.html,虽然我无法验证准确性,因为我不经常使用 IE(任何版本)或 Windows,如果有机会的话。

        【讨论】:

          猜你喜欢
          • 2015-01-09
          • 2012-06-06
          • 1970-01-01
          • 2023-04-01
          • 1970-01-01
          • 2015-05-13
          • 1970-01-01
          • 1970-01-01
          • 2023-03-23
          相关资源
          最近更新 更多