28.CSS Gradient Effect

21st Chapter CSS Gradient Effect

First, linear gradient

Linear-gradient(azimuth, start color, end color)

(1) orientation: Optional reference number, orientation of the gradient. Values that can be used: totop,totopright,to right,tobottom , To Bottom left , to left , To top left .

(2) starting color: Required parameter, color value.

(3) end color: Required parameter, color value.

example,// two required parameters

div{

Background-image:linear-gradient (Orange,green);

}

Add an Access (top,bottom,left,right Implementation of the gradient direction is relatively single, we can also use the angle to set the direction value, such as 0 degrees: ( 0deg ) is equivalent to To top , the angle increases in the counterclockwise direction as the angle value increases. )

Background-image:linear-gradient (to top,orange,green); To bottom is the default value;

set the direction by angle,0~ degrees of degree, can be said negative

Background-image:linear-gradient (45deg,orange,green);

multi-linear gradient

Background-image:linear-gradient ( -45deg,orange,blue,green,red);

set the multi-linear position by percent

Background-image:linear-gradient ( -45deg,orange 0%,green 20%,blue 40%,red 100%); percentages are the gradient positions that change the start and end of a color.

Background-image:linear-gradient ( -45deg,orange 10px,green 40px,blue,red 500px); PX calculation is a bit cumbersome, so it is not recommended.

combine backgrounds and use transparent gradients to achieve a strong sense of hierarchy ( online quite a lot )

background-color:red;

Background-image:linear-gradient (Rgba (0,0,0,0.6), Rgba (0,0,0,0));

Repeating Gradient property values (Baidu, there will be a lot of beautiful)

Background-image:repeating-linear-gradient ( -45deg,orange 0%,green 20%,blue 40%,red 100%);

Opera Firefox Chrome IE Safari

             Some support requires a prefix     11.5         no          4 ~ 9      4 ~ 5       no  

support with prefix required No 3.6~ten~5.1~6 no

support without prefix 12.1+ 16+ 26+ 6.1+ 10.0+

plus a compatible prefix ( You can check the browser engine prefix for rejection on the internet )

Background-image:-webket-linear-gradient (to top,orange,green);

Background-image:-moz-linear-gradient (to top,orange,green);

Background-image:-o-linear-gradient (to top,orange,green);

Background-image:linear-gradient (to top,orange,green);

Two, radial gradient (the graph is the ellipse to the surrounding divergence)

Background-image:radial-gradient (Orange,green)

Linear-gradient(azimuth, start color, end color)

(1) Orientation: Optional reference number, orientation of the gradient. Values that can be used: totop,totopright,to right,tobottom , To Bottom left , to left , To top left .

(2) start color: Required parameter, color value.

(3) End color: Required parameter, color value.

Two required Parameters

shapes can be set (default is oval)

Shape Description

(1)Circle Circle

(2)elipse ellipse, default value

Background-image:radial-gradient (Circle,orange,green)

not only can you set the shape, you can also set the direction of the color divergence

direction Description

Top out of the roof

left divergence

Right

Bottom Bottom

in Center

you can also compound the direction, such as the lower right

Background-image:radial-gradient (circle at right bottom,orange,green)

you can set the divergence distance, which is the radius length of the circle

Background-image:radial-gradient (Circle Closest-side,orange,green)

radius keyword Description

Closest-side Specifies the radius length of the radial gradient from the center to the nearest edge from the center point

Closest-corner Specifies the radius length of the radial gradient from the center to the nearest corner from the center point

Farthest-side Specifies the radius length of the radial gradient from the center to the farthest edge from the center

Farthest-corner Specifies the radius length of the radial gradient from the center to the point farthest from the center

keywords have a bit of a mouthful, you can use pixels to represent radii, but not percent

Background-image:radial-gradient (Circle 50px,orange,green);

Similarly, there is a repeating background (the radius of the circle is too small)

Background-image:repeating-radial-gradient (Circle 50px,orange,green);

compatibility Mode

Background-image:-webket-radial-gradient (Circle,orange,green);

Background-image:-moz-radial-gradient (Circle,orange,green);

Background-image:-o-radial-gradient (Circle,orange,green);

Background-image:radial-gradient (Circle,orange,green);

two repeating backgrounds just add the prefix to compatibility mode.

Background-image:-webket-repeating-radial-gradient

Background-image:-moz-repeating-radial-gradient

Background-image:-o-repeating-radial-gradient

Background-image:repeating-radial-gradient

28.CSS Gradient Effect