Webkit text and background Effects, webkit text background

Webkit text and background Effects, webkit text background

-Webkit-background-clip: padding-box | border-box | content-box | text: Specifies the area where the background image of the object is cropped outward. The corresponding script feature is backgroundClip.

Padding-box	Crop the background from the padding area (excluding padding.
Border-box	Crop the background from the border area (excluding border.
Content-box	Crop the background from the content area.
Text	Crop the foreground content from the shape (such as text) as the cropping area, so that you can use the background as the fill color or other masks or achieve the text gradient effect.

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 </div>

Result: Text

Padding-box and border-box (I don't know why they feel the same)

Content-box

-Webkit-background-origin: padding-box | border-box | content-box

Set or retrieve the reference origin (location) of the background image of the object when calculating the background-position ). The corresponding script feature is backgroundOrigin.

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

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

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

-Webkit-background-size: set the size of the background image of the object. This attribute provides two parameter values (except for feature values cover and contain ). If two are provided, the first is used to define the width of the background image, and the second is used to define the height of the background image. If only one image is provided, the value is used to define the width of the background image. The default value is auto, indicating that the height is auto. In this case, the background image scales proportionally based on the provided width. The corresponding script feature is backgroundSize.

<Length>	Specify the size of the background image with the length value. Negative values are not allowed.
<Percentage>	Specify the background image size by percentage. Negative values are not allowed.
Auto	The actual size of the background image.
Cover	Scale the background image to completely overwrite the container, and the background image may exceed the container.
Contain	Scale the background image to the same width or height as the container width or height. The background image is always included in the container.

 

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

Text:

-Webkit-rtl-ordering: logical | visual

Logical	Default value.
Visual	Text is encoded in descending order from right to left, so the entire line of text can be displayed from left to right.

-Webkit-text-fill-color: Set the text fill color in the object. If both text-fill-color and color are set, the color defined by text-fill-color overwrites the color attribute, you can make some effects, such as gradient text and hollow text.

-Webkit-text-security: Specify the shape to be used instead of text display.

None	None.
Circle	Circle.
Disc	Circle.
Square	Square.

 

-Webkit-text-stroke: [text-stroke-width] | [text-stroke-color]. Composite attribute. Set or retrieve the stroke of the text in the object.

-Webkit-writing-mode: horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

Horizontal-tb	A top-down horizontal writing mode. That is, left-right-top-bottom (similar to IE private value lr-tb)
Vertical-rl	Vertical writing mode from right to left. That is, top-bottom-right-left (similar to IE private value tb-rl)
Vertical-lr	Vertical writing mode from left to right. That is, top-bottom-left-right
Lr-tb	Left-right, top-bottom. The content in the object flows from left to right in the horizontal direction, and the last row follows the previous row. All the glyphs are vertical and upward. This layout is used by the Rome language family (IE)
Tb-rl	Top-bottom, right-left. The content in the object flows from top to bottom in the vertical direction and from right to left. The left of the first vertical line. The full-width characters are vertical and upward, and the half-width characters such as Latin letters or katakana Rotate 90 degrees clockwise. This layout is commonly used by East Asian languages (IE)

-Webkit-marquee: <direction> <increment> <repetition> <style> <speed>: defines the attributes of the displayed content.

<Direction>	Text scroll direction
<Increment>	Distance of each movement
<Repetition>	Number of times of text scrolling
<Style>	Text scrolling
<Speed>	Scroll or slide speed

 

Attribute values:

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