1. background

1.1 background-clip

grammar

background-clip:border-box;

value

value	meaning
border-box	The background is clipped to the border.
padding-box	The background is clipped to the inside margin
content-box	The border is clipped to the content

1.2 background-origin

grammar

background-origin:border-box;

value

value	meaning
border-box	Positioning at the border
padding-box	Orientation from inside margin
content-box	Content Orientation

In conjunction with the previous paragraph css background 1.5. in

1.3 background-size

grammar

There are two values. Write a value and the second value automatically auto

background-origin:100%;

value	meaning
1px	numerical value
100%	%
cover	Zoom in and out of excess tailoring. How to cut the decisive position.
contain	Zoom and zoom without clipping, full picture display.

1.3 Multiple Background Images

grammar

background-image:url(),url();

In English, commas are separated, who shows before who shows before.

1.4 abbreviation

Grammatical order
background: The color position size fills the style to locate from which to clip the picture status picture address;

background: color position size repeat origin clip attachment image；

background:#f00 center 50% no-repeat content-box content-box fixef url();

2. gradual change

2.1 Linear-gradient;

2.1.1 Upper and Lower Gradients

grammar

background:-webkit-linear-gradient(#f00,#00f);
background:   -moz-linear-gradient(#f00,#00f);
background:     -o-linear-gradient(#f00,#00f);
background:        linear-gradient(#f00,#00f);

You don't need to write the direction to write the color directly, but the color can have multiple values.

Gradient around 2.1.2

grammar

background:-webkit-linear-gradient( left#f00,#00f);
background:   -moz-linear-gradient( right,#f00,#00f);
background:     -o-linear-gradient( right,#f00,#00f);
background:        linear-gradient(to right,#f00,#00f);

Compatibility issues, different kernels and different writings

2.1.3 Diagonal Gradient

Grammar (e.g. upper left to lower right)

background:-webkit-linear-gradient( left top,#f00,#00f);
background:   -moz-linear-gradient( right bottom,#f00,#00f);
background:     -o-linear-gradient( right bottom ,#f00,#00f);
background:        linear-gradient(to right bottom,#f00,#00f);

2.1.4 Angle Gradient

grammar

background:-webkit-linear-gradient( 45deg,#f00,#00f);
background:   -moz-linear-gradient( 45deg,#f00,#00f);
background:     -o-linear-gradient( 45deg,#f00,#00f);
background:        linear-gradient( 45deg,#f00,#00f);

Official:
0deg from bottom to top
90 DEG from left to right
180 DEG from top to bottom
- 90 DEG from right to left
webkit:
0deg from left to right
90 DEG from bottom to top
180 DEG from right to left
- 90 DEG from top to bottom
== Write to the front with the kernel and write to the back by default to solve the problem. = =

2.1.5 Gradient Node Control

grammar

background:-webkit-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background:   -moz-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background:     -o-linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);
background:        linear-gradient( 45deg,#f00 10%,#00f 20%,#0f0);

The first color value does not write the node degree by default 0%, and the last one is 100%.

2.1.6 Gradient Transparency

grammar

background:-webkit-linear-gradient( 45deg,#f00,#f000);
background:   -moz-linear-gradient( 45deg,#f00,#f000);
background:     -o-linear-gradient( 45deg,#f00,#f000);
background:        linear-gradient( 45deg,#f00,#f000);

We can write in terms of the value of rgba, the first rgba(255,255,255,1) and the second # FFFF.

2.1.7 repeating-linear-gradient();)

grammar

background:-webkit-repeating-linear-gradient( 45deg,#f00 0%,#f000 20%);
background:   -moz-repeating-linear-gradient( 45deg,#f00 0%,#f000  20%);
background:     -o-repeating-linear-gradient( 45deg,#f00 0%,#f000  20%);
background:       repeating-linear-gradient( 45deg,#f00  0%,#f000  20%);

The number of repetitions depends on the last percentage.

2.2 Radial-gradient;

Gradient from inside to outside

2.2.1 Gradual Basic Grammar

grammar

background:-webkit-radial-gradient(#f00 10%,#00f 50%);
background:   -moz-radial-gradient(#f00 10%,#0f 50%);
background:     -o-radial-gradient(#f00 10%,#00f 50%);
background:        radial-gradient(#f00 10%,#00f 50%);

In this case% is the length from the center point to the boundary.

2.2.2 Gradient Shape

grammar

background:-webkit-radial-gradient(circle,#f00 10%,#00f 50%);
background:   -moz-radial-gradient(circle,#f00 10%,#0f 50%);
background:     -o-radial-gradient(circle,#f00 10%,#00f 50%);
background:        radial-gradient(circle,#f00 10%,#00f 50%);

There are only two circle s and ellipses, and the ellipse is the default value.

2.2.3 Gradient Size (Value% Look at the edge or corner)

grammar

background:-webkit-radial-gradient(closest-side circle,#f00 10%,#00f 50%);
background:   -moz-radial-gradient(closest-side circle,#f00 10%,#0f 50%);
background:     -o-radial-gradient(closest-side circle,#f00 10%,#00f 50%);
background:        radial-gradient(closest-side circle,#f00 10%,#00f 50%);

value	meaning
closest-side	Nearest edge
farthest-side	Farthest edge
closest-corner	Nearest corner
farthest-corner	Farthest angle

Shape and size are attributes

2.2.4 Gradient Center Position

grammar

background:-webkit-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background:   -moz-radial-gradient(50% 30%,closest-side circle,#f00 10%,#0f 50%);
background:     -o-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background:        radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);

The first value is 30% left and the second value is 50%.

2.2.5 repeating-radial-gradient

Syntax *

background:-webkit-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background:   -moz-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#0f 50%);
background:     -o-repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);
background:        repeating-radial-gradient(50% 30%,closest-side circle,#f00 10%,#00f 50%);

2.3 Gradient IE6-IE8 (with filters)

grammar

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#0000ff',GradientType=0);

Start Colorstr Start Color
End Colorstr End Color
Gradient Type Gradient Type Gradient Type: Value (0: Linear up and down | 1: Linear around | 2: Second value to black, up and down)