Home > Developer > JavaScript
Use CSS3 to achieve the text stroke effect. [The effect is here, and the idea is here !], Css3 stroke
As an emerging front-end technology, CSS3 can achieve many complex changes, such as text strokes.
The text-shadow attribute is used here. As the name suggests, it adds a shadow effect to the text. Example:
Html codeParameter descriptions for each location:
Html code
Where: x displacement and y Displacement Indicate the Offset Value of the Shadow relative to the text, which can be a negative value.
Now, the idea is simple: Make a 1px shadow of zero degree for all four directions.
Statement:
Html codeThis method is applicable to mainstream browsers.
In principle, text-shadow supports multi-direction shadow writing, but the cost is too much code!
<! -- EndF -->
<Style type = "text/css">
Body {font-size: 12px; font-family: Arial, Helvetica, sans-serif;
Filter: alpha (style = 1, startY = 0, finishY = 100, startX = 100, finishX = 100 );
Background-color: #666666;
}
. Sizscolor {
Position: absolute;
Padding: 4px;
Filter:
Dropshadow (offx = 1, offy = 0, color = white)
Dropshadow (offx = 0, offy = 1, color = white)
Dropshadow (offx = 0, offy =-1, color = white)
Dropshadow (offx =-1, offy = 0, color = white );
Text-shadow: 0 0 1px # FFF;
}
</Style>
</Head>
<Body>
<Span> filter for ie and css3 for firefox </span>
<Br/>
<Div class = "sizscolor"> Stroke Effect in Chinese </div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
