Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to achieve linear gradient and radial gradient effect of background color in css". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Linear gradient (linear-gradient)

To achieve a linear gradient, you need to define at least two colors, which are the colors you want to make a smooth transition, one as the starting point and the other as the end.

Syntax:

Background: linear-gradient (colorA,colorB)

ColorA is the start color and colorB is the end color.

You can also define the direction of the gradient, whether it is from top to bottom, from left to right, or from the upper left corner to the lower right corner (top to bottom by default).

Syntax:

Background: linear-gradient (direction,colroA,colorB)

Direction represents the direction of the gradient, directly write the starting point of the direction, for example: the direction of gradient from left to right, directly write left; gradient direction from bottom to top, directly write bottom; gradient direction from the upper left corner to the lower right corner, write as background: linear-gradient (left top,colorA,colorB).

A case study of CSS linear gradient

Example: from the lower left corner to the upper right corner, from red to blue

Code:

Div {width: 400px; height: 200px; background:-webkit-linear-gradient (left bottom,red,blue); background:-o-linear-gradient (left bottom,red,blue); background:-moz-linear-gradient (left bottom,red,blue); background: linear-gradient (left bottom,red,blue);}

2. Radial gradient (radial-gradient)

A CSS3 radial gradient is a circular or oval gradient. The color no longer changes along a straight axis, but is emitted from one starting point in all directions. It is more complex than linear gradients.

You can define its center (the default gradient is center), shape (prototype or oval), size, and so on.

Syntax: background: radial-gradient (position,shape,size,start-color,last-color)

Position

Specifies the Abscissa or ordinate of the center of the radial gradient with a length value. Can be negative.

Specifies the Abscissa or ordinate of the center of the radial gradient as a percentage Can be negative.

Left: sets the Abscissa value of the center of the radial gradient on the left.

Center: sets the Abscissa value or ordinate at the center of the radial gradient circle.

Right: sets the Abscissa value of the center of the radial gradient on the right.

Top: sets the ordinate value at the top to the center of the radial gradient.

Bottom: sets the ordinate value of the center of the radial gradient at the bottom.

Shape

Can be a value of circle or ellipse. Circle represents a circle and ellipse represents an oval. The default value is ellipse.

Size

Closest-side: specifies that the radius length of the radial gradient is from the center of the circle to the nearest edge of the center

Closest-corner: specifies that the radius length of the radial gradient is from the center of the circle to the nearest angle to the center of the circle

Farthest-side: specifies that the radius length of the radial gradient is the edge farthest from the center of the circle

Farthest-corner: specifies that the radius length of the radial gradient is the angle farthest from the center of the circle; default

A case study of css Radial gradient

For example: start the gradient from the position of 60% of 55%, specify that the radius length of the radial gradient is from the center to the nearest edge of the circle, and the color of the gradient from the inside to the outside is blue,green,yellow,black.

Code:

Div {width: 400px; height: 200px; background:-webkit-radial-gradient (60% 55%, closest-side,blue,green,yellow,black); background:-o-radial-gradient (60% 55%, closest-side,blue,green,yellow,black); background:-moz-radial-gradient (60% 55%, closest-side,blue,green,yellow,black); background: radial-gradient (60% 55%, closest-side,blue,green,yellow,black) } "how to achieve the background color linear gradient and radial gradient effect in css" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.