CSSlinear-gradient and radial-gradient

I have used many css3 properties before, but soon forgot about them because many of them are complicated to remember, so I wanna to write blog to make it easier to remember them.
so let me first explain line-gradient:
background-image: linear-gradient(direction, color-step1, color-step2, ....)

• direction: using angle to indicate the gradient direction whose values can be an angle or one of them: to left, to right, to top, to bottom. to bottom(180deg) is the default. 
• color-step: the beginning color for gradient, consisting of two parts: color: valid css color value; length or percentage: the beginning position, not allowing negative value

examples(assuming height:100px)
background:linear-gradient(to bottom, red 0%,yellow 50%,green 100%); same to background:linear-gradient(180deg, red 0px, yellow 50px, green 100px);


repeatng-linear-gradient(): background: repeating-linear-gradient(red 0,red 10%,yellow 10%,yellow 20%);


thease parameters represent 0% - 10% from red to red, 10% - 20% from yellow to yellow, and repeat this effect to cover entire element size.

radial-gradient()
this function parametes consist of five parts: shape, size, the position of circle center, color, color position.

• shape: ellipse(default) or circle;
• size: I prefer to call it as the increassing direction of radius of radial gradient, with possible values: farthest-corner(default), closest-corner, furthest-side, closest-side.
• position: the center position of the radial gradient, (50%, 50%) is the default;
• color and color position: same to linear-gradient;

this effect is that the center position is located at (0,0) and gradient radius is equal to element's width;

And repeating-radial-gradient() is same to repeating-linear-gradient().

lastly, there is the compatibility of linear-gradient and radient-gradient(more about that on CanIuse website)

The above is the detailed content of CSSlinear-gradient and radial-gradient. For more information, please follow other related articles on the PHP Chinese website!