Summary of the CSS3 effect of the traditional

  Preface

  CSS not commonly used effect summary, today to share some of the less commonly used CSS effect, some effect we may not be used, so maybe some friends have not used, today lead you to go through these less common effects. Some of the commonly used effects of CSS, I also summarized before, please see: Http://www.haorooms.com/post/css_common   not commonly used to summarize the following several, slowly back to add   1, Box-reflect text Reflection effect   effect demo as follows:   Property parameter introduction:   Box-reflect:none?? = above below left right = = None Default value: None   code is used as follows:   reflect{    width:100%;     margin: 0 auto;    -webkit-box-reflect:below 0-webkit-linear-gradient (transparent,transparent 50%,rgba (255,255,255,.3)) ;     Font:bold 50px/1.231 Georgia,sans-serif;    } 2, background clips background-clip   Background used a lot, the front also has a lot of articles, including many background settings and so on http://www.haorooms.com/post/css3_ Bg_multi, today's main clip this attribute, the main function of this property is the background clipping, we may often use in PS. The specific syntax is as follows:   background-clip: [, ]* = border-box padding-box content-box text default value: Bo Rder-box with a relatively large number of content-box and text,text can do some background text. The demo is as follows: Core code:   Text P{width:auto;height:auto;background-repeat:repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:bold;font-size:120px;} 3, Text-fill-color set the gradient font   with the above clip, demo as follows:   Core code is as follows:   Background:-webkit-linear-gradient (Top, #eee, # AAA 50%, #333 51%, #000); -webkit-background-clip:text; -webkit-text-fill-color:transparent; 4, direction font layout direction   syntax:   direction:ltr RTL default: Ltr   TR: text flow from left to right. RTL: Text flow from right to left. Text is row and inverted row, generally not used!   5, Font-stretch   Sets or retrieves whether the text in the object is transversely stretched and distorted. The text is stretched relative to the normal width of the font displayed by the browser.   Grammar:   font-stretch:ultra-condensed extra-condensed condensed semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded Default value: Normal value:   ultra-condensed: 4 cardinality narrower than normal text width. Extra-condensed: 3 cardinality narrower than normal text width. Condensed: 2 cardinality narrower than normal text width. Semi-condensed: 1 cardinality narrower than normal text width. Normal: Text width semi-expanded: 1 cardinality wider than normal text width. Expanded: 2 cardinality wider than normal text width. Extra-expanded: 3 Cardinality wider than normal text width. Ultra-expanded: 4 cardinality wider than normal text width. 6, Text-stroke   text strokes.   text-stroke:[Text-stroke-width] [Text-stroke-color] Default: Look at each independent property   fetch value:   [Text-stroKe-width]: Sets or retrieves the stroke thickness of text in an object [Text-stroke-color]: Sets or retrieves the stroke color code for text in an object case:   Stroke p{    margin:50px Auto 100px;font-size:100px;    -WEBKIT-TEXT-STROKE:1PX #f00; 7, Tab-size   Set the length of tabs in the object.   Syntax:   word-wrap: Default: 8   pre{background: #eee;-moz-tab-size:4;-o-tab-size:4} 8, content   used to and: After and: Before pseudo elements used together, before or after the object display content.   9, quotes   Use the reference of the title number.