Summary of common color gradient methods

This time to bring you common color gradient method summary, so that the color gradient method of attention to what, the following is the actual case, together to see.

One, linear gradient: linear-gradient

Grammar:

<linear-gradient> = Linear-gradient ([[<angle> | To <side-or-corner],]? <color-start>[, < color-end>]+)
<side-or-corner> = [left | right] | | [Top | bottom]
<color-start|end> = <color>[<length>|<percentage>]?

The following values are used to indicate the direction of the gradient, which can be set using an angle or a keyword:

<angle>: Specifies the direction (or angle) of the gradient with an angle value.

To left: Sets the gradient to right-to-bottom. Equivalent: 270deg

To: Sets the gradient from left to right. Equivalent: 90deg

To top: Sets the gradient from bottom to top. Equivalent: 0deg

To bottom: Sets the gradient from top to bottom. Equivalent to: 180deg. This is the default value, which is equivalent to leaving it blank.

<color-start|end> specifies the starting and ending colors for the gradient:

<color>: Specifies the color.

<length>: Specify the start and end color position with a length value. Negative values are not allowed

<percentage>: Specifies the position of the starting and ending color in percent.

Example:

p {      width:200px;      height:100px;      margin:10px 5px;      border:1px solid #ddd000;  }  #LinearStartToEnd {    float:left;    Background:linear-gradient (#ff0000, #00ff00);  }  #LinearPercentage {    float:left;    Background:linear-gradient (#0000ff, #ff0000 52%, #00ff00);  }  #LinearAnglePercentage {    float:left;    Background:linear-gradient (90deg, #ff0000 20%, #00ff00 50%, #000000 80%);  }  #LinearAngle {    float:left;    Background:linear-gradient (30deg, #ffff00 30%, #ff0000, #00ff00);  }  #LinearTopRight {    float:left;    Background:linear-gradient (to Top, #00ff00, #ff0000 50%, #0000ff);  }

Two, radial gradient: radial-gradient

Grammar:

<position> = [<length>①| <percentage>①| left | center①| right]? [<length>②| <percentage>②| Top | center②| bottom]?
<shape> = Circle | Ellipse
<size> = <extent-keyword>| [<circle-size>| | <ellipse-size>]
<extent-keyword> = Closest-side | Closest-corner | Farthest-side | Farthest-corner
<circle-size> = <length>
<ellipse-size> = [<length>| <percentage>]{2}
<shape-size> = <length>| <percentage>
<radial-gradient> = Radial-gradient ([[<shape>| | <size>] [at <position>]?, | at <position& Gt ,]?<color-start>[[, <color-end>]]+)

<position> determines the position of the center point. If 2 parameters are provided, the first is the horizontal axis and the second is the ordinate; if only one is provided, the second value defaults to 50%, which is the center

<length>①: Specifies the horizontal value of the center of the radial gradient with a length value. Can be a negative value.

<percentage>①: Specifies the horizontal value of the center of the radial gradient with a percentage. Can be a negative value.

<length>②: Specifies the ordinate value of the center of the radial gradient with a length value. Can be a negative value.

<percentage>②: Specifies the ordinate value of the center of the radial gradient with a percentage. Can be a negative value.

Center①: Sets the horizontal axis value for the center of the radial gradient.

Center②: Sets the ordinate value in the center of the center of the radial gradient.

Left: Sets the horizontal axis value of the center of the radial gradient on the ieft.

Right: Sets the horizontal axis value of the center of the radial gradient on the left.

Top: Sets the ordinate value for the center of the radial gradient at the top.

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

<shape> determine the type of circle

Circle: Specifies the radial gradient of the circle

Ellipse: Specifies the radial gradient of the ellipse.

<extent-keyword> Circle | Ellipse accepts the value as size.

Closest-side: Specifies that the radial gradient has a radius length from the center point to the nearest edge from the center point.

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

Farthest-side: Specifies that the radial gradient has a radius length from the center to the edge farthest from the center.

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

<circle-size> Circle accepts the value as size.

<length>: Specifies the radius length of a positive circle radial gradient with a length value. Negative values are not allowed.

<ellipse-size> Ellipse accepts the value as size.

<LENGTH>: Specifies the horizontal or vertical radius length of the elliptical radial gradient with a length value. Negative values are not allowed.

<PERCENTAGE>: Specifies the horizontal or vertical radius length of the elliptical radial gradient, in percent. Negative values are not allowed.

Example:

 #RadialCenterCircle {float:left;  Background:radial-gradient (circle at center, #ff0000, #ffff00, #00ffff);      } #RadialClosestSide {float:left;  Background:radial-gradient (Circle Closest-side, #ff0000, #00ff00, #ffff00);      } #RadialFarthestSide {float:left;  Background:radial-gradient (Farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);      } #RadialRightTop {float:left;  Background:radial-gradient (at right top, #ff0000, #ffff00, #00ff00);      } #RadialRadiusCenter {float:left;  Background:radial-gradient (Farthest-side at top right, #ff0000, #ffff00, #01fefe);      } #RadialGroup {float:left; Background:radial-gradient (Farthest-side at top right, #ff0000, #ffff00, #009f00, transparent), radial-  Gradient (60px at top left, #ff0000, #ffff00, #00ff0e); }

Three, repeated linear gradients: repeating-linear-gradient

Syntax and parameters are similar to linear gradients, which are not mentioned here. Please refer to the CSS manual for details.

Example:

#RepeatingLinearPercentage {    float:left;      Background:repeating-linear-gradient (#ff0000, #00ff00 10%, #000000 15%);  }  #RepeatingLinearRight {    float:left;      Background:repeating-linear-gradient (to right, #ff0000, #00ff00 10%, #000000 15%);  }  #RepeatingLinearAngle {    float:left;      Background:repeating-linear-gradient (45deg, #ff0000, #00ff00 10%, #0000ff 15%);  }  #RepeatingLinearBottomLeft {    float:left;      Background:repeating-linear-gradient (to bottom left, #00ffff, #ff0000 10%, #00ff00 15%);  }

Four, repeated radial gradient: repeating-radial-gradient

Syntax and parameters are similar to radial gradients, which are not mentioned here. Please refer to the CSS manual for details.

Example:

#RepeatingRadialCircle {    float:left;      Background:repeating-radial-gradient (Circle, #ff0000 0, #00ff00 10%, #0000ff 15%);  }  #RepeatingRadialTopLeft {    float:left;      Background:repeating-radial-gradient (at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%);  }  #RepeatingRadialClosestCorner {    float:left;      Background:repeating-radial-gradient (Circle Closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%);  }

A complete example:

<! DOCTYPE html> 

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How to deal with the nth-child () compatibility problem under IE8

How to get rid of CSS3 's blur white side

IE6 Solutions for compatibility issues