HTML 文本周围的颜色

Question

I needed to show color around the text in my HTML page, I tried border property but it is giving square box around the Text. How to achieve below requirement

Thanks.

Answer 1

I would write the code here... But this link http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects explains it so well.

Example Demo : http://codepen.io/anon/pen/CDsFb

This is actually much better ...

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;

This will ensure it looks like a proper border you want and not a simple glow around your text.

Answer 2

You are looking for text-shadow CSS property

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

http://jsfiddle.net/NGPhL/

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

Answer 3

You may use

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

http://css3generator.com/

Answer 4

You can use the CSS3 text-shadow property . As long the browser supports webkit, this should surfice.

Answer 5

If browser don't support CSS3:

Use can use two text nodes with 17px and 18px font-size (for example) and positioning by CSS first under second (position:absolute, z-index:100, left, top, etc) with different colors.

Answer 6

Thanks For your suggestions, I found an example to get this requirement here

http://gazpo.com/2011/02/text-shadow/ 7. Border Around the text

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;

Answer 7

main-heading h2{

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

The text-shadow not working fine. So use text stroke instead of text-shadow. Text shadow also makes difficulties at different devices.

You can see in the screenshot given below