Use CSS3 to achieve text stroke effects here, creative in you! 】

As a new front-end technology, CSS3 can achieve many complex changes, such as text strokes.

Here the main use of the Text-shadow attribute, as the name implies is to add shadow effect text. Cases:

HTML code

1. text-shadow:10px 5px 2px #f60;  

Each positional parameter description:

HTML code

1. text-shadow:x Displacement Y-displacement blur degree color

Where: the x displacement and y displacement represent the offset of the shadow relative to the text, which can be negative values.

Now that's the point, the idea is simple: a 1px shadow with a zero blur in all four directions.

The wording is:

HTML code

1. -webkit-text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0-1px 0;
2. -moz-text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0-1px 0;
3. Text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0-1px 0;
4. *filter:glow (color= #000, strength=1);

This is done for the mainstream browser to adapt the wording.

In principle, Text-shadow supports multi-directional shading, but at the cost of a lot of code!

<!--endf-->

Use CSS3 to achieve text stroke effects here, creative in you! 】