27.CSS3 text effects

21st Chapter CSS3 Text Effects

                                                                                  ****************************************************

                                                                                  * minimum version of query adaptation, can go: " http://caniuse.com " *

****************************************************

first, the text shadow ( CSS3 provides a Text-shadow Text shadow effect)

browser support is as follows

Opera Firefox Chrome IE Safari

Text-shadow 9.5+ 3.5+ 4+ + 3.1+

Second, text clipping

CSS3 provides the textoverflow property to control text overflow, which is to crop the overflow part, and then decide whether to add ellipses, and the attributes are as follows

(1)clip : Default value, no ellipsis is added when clipping text.

(2)ellipsis : Add ellipsis when clipping text.

for textoverflow support, it's based on his attribute value .

Opera Firefox Chrome IE Safari

(1)clip 9.63+ 2.0+ 1.0+ 6.0+ 3.1+

(2)ellipsis 10.5+ 6.0+ 1.0+ 6.0+ 3.1+

in Early versions of Opera 10.0~10.1 , prefix -o- is required . Others do not.

Third, text strokes

CSS3 provides stroke properties, both Text-storke,text-storke-width,text-storke-color , currently only WebKit engine browser support, and must be prefixed with -webkit- to be effective

Properties Opera Firefox Chrome IE Safari

Ext-storke series 15.0+ does not support 4.0+ not supported 3.1+

does not match and style, and color property is not different

Create gradient text with new effects on the CSS3 background.

27.CSS3 text effects