css3--background

First, gradient: gradients

Linear gradient (linear gradients)

Background:-webkit-linear-gradient (90deg,red 10%,blue);

1, need to have a kernel prefix

2, the direction can be letter or angle (left top right bottom)

3. Counterclockwise Rotation for angle

4. Unlimited number of color values

Radial gradient (radial gradients)

Background:-webkit-radial-gradient (90deg,red 10%,blue);

1, do not accept the angle parameter

2, the default is the center

Second, Reflection: Box-reflect

-webkit-box-reflect:below 0-webkit-linear-gradient (Top,rgba (0,0,0,0) 20%,rgba (0,0,0,1));

Parameters: Direction (above,below,left,right), distance, gradient

Background-size background size setting px%

Third, the background cutting:

Background-clip

Border-box 丨 Padding-box 丨 Content-box

Iv. background start Position: Background-origin

Border-box 丨 Padding-box 丨 Content-box

V. Background mask:-webkit-mask

-webkit-mask-image:url 丨 gradient/* You can use a picture or gradient as a mask layer */

-webkit-mask-repeat;repeat 丨 repeat-x 丨 repeat-y 丨 no-repeat

-webkit-mask-position:x y;

-webkit-mask-clip:border 丨 padding 丨 content

-webkit-mask-origin:border 丨 padding 丨 content

css3--background