在HTML中为文本添加背景色

Question

我需要在HTML页面中文字周围显示颜色，我尝试了边框属性，但它会在文本周围显示方形框。如何实现下面的要求

谢谢。

- Theja

Answer 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;

这将确保它看起来像是您想要的适当边框，而不仅仅是在文本周围产生的简单发光效果。

- Debajyoti Das

Answer 2

你正在寻找 text-shadow CSS 属性。

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

这里是一个JSFiddle示例

这里是关于CSS文本阴影的说明

- David Diez

Answer 3

你可以使用

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

http://css3generator.com/

- Veikko Karsikko

Answer 4

main-heading h2{

    -webkit-text-stroke: 2px #42a6e1;
}

text-shadow不起作用，所以使用文本描边来代替text-shadow。在不同的设备上，文本阴影也会产生困难。

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

- ALTAF LATIF

Answer 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;

- Theja

Answer 6

你可以使用CSS3 text-shadow 属性。只要浏览器支持 Webkit，这就足够了。

- Alex Anderson

Answer 7

如果浏览器不支持CSS3：

您可以使用两个文本节点，分别设置17px和18px的字体大小（例如），并通过CSS定位第一个在第二个下面（position:absolute, z-index:100, left, top等），并使用不同的颜色。

- moddom