Webkit text and background effects

-webkit-background-clip:padding-box | Border-box | Content-box | Text that specifies the area to which the background image of the object is cropped. The corresponding script attribute is Backgroundclip

Padding-box	Crop the background outward from the padding area (without padding).
Border-box	Crop the background outward from the border area (without border).
Content-box	From the content area, start to crop the background outwards.
Text	The shape of the foreground content, such as text, is cropped out as the clipping area, so that you can use the background as a matte for the fill color or to achieve the effect of a text gradient.

Example:

div{font-size:40px; width:500px; margin:30px auto; text-align:center; border:5px solid #999; padding:10px;}. Bgtest{background:-webkit-linear-gradient (Top, #F00, #000);-webkit-background-clip:text;-webkit-text-fill-color: Transparent;}

<div class= "bgtest" > Background test Background test</div>

Result: Text

Padding-box and Border-box (I don't know why the two feel the same)

Content-box

-webkit-background-origin:padding-box | Border-box | Content-box

Sets or retrieves the reference origin (position) of the object's background image when the background-position is computed. The corresponding script attribute is Backgroundorigin

Padding-box	Displays the background image starting from the padding area (including padding).
Border-box	Displays the background image starting from the border area (including border).
Content-box	The background image is displayed starting from the content area.

Example: http://ued.ctrip.com/blog/wp-content/webkitcss/demo/background-origin.html

Background-position: Sets the starting position of the background image, in detail http://www.w3school.com.cn/cssref/pr_background-position.asp

-webkit-background-size: Sets the size of the object's background image. This property provides 2 parameter values (except for the attribute value cover and contain). If you provide two, the first defines the width of the background image, and the second defines the height of the background image. If you provide only one, the value will be used to define the width of the background image, and the 2nd value defaults to auto, which is the height of auto, at which time the background graph is scaled as a reference to the width provided. The corresponding script attribute is backgroundsize

<length>	Specifies the background image size with a length value. Negative values are not allowed.
<percentage>	Specifies the background image size in percent. Negative values are not allowed.
Auto	The true size of the background image.
Cover	The background image is more likely to be out of the container than to zoom to a full overlay container.
Contain	The background image is always included in the container, such that the background image is equal to the width or height of the container, and so on.

Example: http://ued.ctrip.com/blog/wp-content/webkitcss/demo/background-size.html

Text-Related:

-webkit-rtl-ordering:logical | Visual

Logical	Default.
Visual	Text is encoded in reverse from right to left, so the entire line of text can be rendered from left to right.

-webkit-text-fill-color: Sets the text fill color in the object. If you set both Text-fill-color and Color,text-fill-color, the color attribute will be overridden, and you can make some effects such as gradient text and cutout text through the Text-fill-color property.

-webkit-text-security: Specifies the shape to use in place of the text display.

None	No.
Circle	Circle.
Disc	Circular.
Square	Square.

-webkit-text-stroke: [Text-stroke-width] | [Text-stroke-color]. Composite properties. Sets or retrieves the stroke of text in an object.

-WEBKIT-WRITING-MODE:HORIZONTAL-TB | VERTICAL-RL | VERTICAL-LR | LR-TB | Tb-rl

Horizontal-tb	The horizontal direction of the top-down writing style. That is left-right-top-bottom (ie private value LR-TB)
Vertical-rl	The vertical direction from the right and left to the writing mode. That is top-bottom-right-left (ie private value tb-rl)
Vertical-lr	The vertical direction of writing from left to right. namely Top-bottom-left-right
Lr-tb	Left-right, up-down. The content in the object flows from left to right in the horizontal direction, and the next line is below the previous line. All glyphs are vertical and upward. This layout is used by the Roman language (IE)
Tb-rl	Up-down, right-left. The content in the object flows vertically from top to bottom, from right to left. The latter vertical lines on the left of the previous vertical lines. The full-width character is vertical, half-width such as the Latin alphabet or katakana 90 degrees clockwise. This layout is commonly used by East Asian languages (IE)

-webkit-marquee:<direction> <increment> <repetition> <style> <speed>, defining the properties of the presentation content

<direction>	Direction of text scrolling
<increment>	Distance of each move
<repetition>	Number of repetitions of text scrolling
<style>	The way text Scrolls
<speed>	Speed of scrolling or sliding

Values for each attribute:

The above content from: http://ued.ctrip.com/blog/wp-content/webkitcss/quicksearch.html

Webkit text and background effects