【问题标题】:Color around the Text in HTMLHTML 中文本周围的颜色
【发布时间】:2013-01-18 14:55:13
【问题描述】:

我需要在我的 HTML 页面中的文本周围显示颜色,我尝试了边框属性,但它在文本周围给出了方形框。 如何达到以下要求

谢谢。

【问题讨论】:

    标签: html css text border


    【解决方案1】:

    我会在这里写代码......但是这个链接http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects解释得很好。

    示例演示http://codepen.io/anon/pen/CDsFb

    这其实好多了……

    text-shadow: 3px 3px 0 #000,
        /* Simulated effect for Firefox and Opera and nice enhancement for WebKit */
       -3px -3px 0 #000,  
        3px -3px 0 #000,
       -3px  3px 0 #000,
        3px  3px 0 #000;
    

    这将确保它看起来像您想要的适当边框,而不是文本周围的简单发光。

    【讨论】:

      【解决方案2】:

      您正在寻找text-shadow CSS 属性

      text-shadow: 0px 0px 3px orange;
      

      http://jsfiddle.net/NGPhL/

      http://www.quirksmode.org/css/textshadow.html

      【讨论】:

        【解决方案3】:

        你可以使用

        text-shadow: 0px 0px 4px #1d1dab;
        filter: dropshadow(color=#1d1dab, offx=0, offy=0);
        

        http://css3generator.com/

        【讨论】:

          【解决方案4】:

          如果浏览器不支持 CSS3:

          使用可以使用两个文本节点,字体大小分别为 17px 和 18px(例如),并通过 CSS first under second(位置:absolute、z-index:100、left、top 等)以不同的颜色进行定位。

          【讨论】:

            【解决方案5】:

            感谢您的建议,我在这里找到了一个满足此要求的示例

            http://gazpo.com/2011/02/text-shadow/ 7. 文字边框

            text-shadow: 0 -4px #00468C,4px 0 #00468C,0 4px #00468C,-4px 0 #00468C,4px -4px #00468C,-4px 4px #00468C,4px 4px #00468C,-4px -4px #00468C;
            

            【讨论】:

              【解决方案6】:

              您可以使用CSS3 text-shadow property。只要浏览器支持 webkit,这应该可以解决。

              【讨论】:

                【解决方案7】:
                main-heading h2{
                
                    -webkit-text-stroke: 2px #42a6e1;
                }
                

                文本阴影无法正常工作。所以使用文本描边而不是文本阴影。文字阴影在不同的设备上也会造成困难。

                您可以在下面给出的屏幕截图中看到

                【讨论】:

                  猜你喜欢
                  • 2021-03-09
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2012-12-01
                  • 2021-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多