Several color gradient patterns commonly used in CSS3

Now HTML5 CSS3 has become more and more popular, using CSS3 to achieve the P-gradient is not a difficult thing, this article for you to collate the three commonly used color gradient mode, including linear gradient, radial gradient and repeated linear gradient, the text is described in detail by the sample code, The need for friends can be used for reference, below to see it together.

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 and can be set using angles or keywords:

<angle>: Use the angle value to specify the direction (or angle) of the gradient.

to left: Set the gradient from right to left. Equivalent to: 270deg

to right: Set the gradient from left to right. Equivalent to: 90deg

to top: Set the gradient from bottom to top. Equivalent to: 0deg

to bottom: Set the gradient from top to bottom. Equivalent to: 180deg. This is the default value, which is equivalent to leaving blank and not writing.

<color-start | end> Used to specify the start and end colors of the gradient:

<color>: Specify the color.

<length>: Use the length value to specify the starting and ending color positions. Negative values are not allowed

<percentage>: Specify the starting and ending color position in percentage.

Examples:

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 right top, # 00ff00, # ff0000 50%, # 0000ff);
}
2. 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>,]? <color-start> [[, <color-end> ]] +)
<position> Determine the position of the center of the circle. If two parameters are provided, the first one indicates the abscissa and the second one indicates the ordinate; if only one is provided, the second value defaults to 50%, ie center

<length> ①: Specify the abscissa value of the center of the radial gradient circle with the length value. Can be negative.

<percentage> ①: Specify the abscissa value of the center of the radial gradient circle as a percentage. Can be negative.

<length> ②: Use the length value to specify the ordinate value of the center of the radial gradient circle. Can be negative.

<percentage> ②: Specify the ordinate value of the center of the radial gradient circle as a percentage. Can be negative.

center①: Set the center to the horizontal coordinate of the radial gradient.

center②: Set the center to the ordinate value of the center of the radial gradient circle.

left: Set the left side to the horizontal coordinate of the radial gradient.

right: Set the right to the horizontal coordinate of the radial gradient.

top: Set the top to the ordinate value of the center of the radial gradient circle.

bottom: Set the bottom to the ordinate value of the center of the radial gradient circle.

<shape> determines the type of circle

circle: Specifies the radial gradient of the circle

ellipse: Specify an elliptical radial gradient.

<extent-keyword> circle | ellipse accepts this value as size.

closest-side: Specifies the radius length of the radial gradient from the center of the circle to the side closest to the center of the circle.

closest-corner: Specifies the radius length of the radial gradient from the center of the circle to the corner closest to the center of the circle.

farthest-side: Specifies the radius length of the radial gradient from the center of the circle to the side farthest from the center of the circle.

farthest-corner: Specifies the radius of the radial gradient from the center of the circle to the farthest angle from the center of the circle.

<circle-size> circle accepts this value as size.

<length>: Use the length value to specify the radius length of the perfect circle radial gradient. Negative values are not allowed.

<ellipse-size> ellipse accepts this value as size.

<length>: Use the length value to specify the horizontal or vertical radius length of the radial gradient of the ellipse. Negative values are not allowed.

<percentage>: Specify the horizontal or vertical radius length of the radial gradient of the ellipse in percentage. Negative values are not allowed.

Examples:

#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);
}
3. Repeated linear gradient: repeating-linear-gradient

The syntax and parameters are similar to linear gradients and will not be repeated here. Please refer to the CSS manual for details.

Examples:

#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%);
}
4. Repeated radial gradient: repeating-radial-gradient

The syntax and parameters are similar to radial gradients and will not be repeated here. Please refer to the CSS manual for details.

Examples:

#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%);
}
Complete example:

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title> ImageCSS3 </ title>
<style>
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 right top, # 00ff00, # ff0000 50%, # 0000ff);
}
  
#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);
}
  
#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%);
}
  
#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%);
}
  
</ style>
</ head>
<body>
<!-Specify the starting and ending colors of the linear gradient->
<p id = "LinearStartToEnd"> </ p>
<!-Specify the starting and ending color position of the linear gradient->
<p id = "LinearPercentage"> </ p>
<!-Specify the linear gradient color gradient direction and start and stop color position->
<p id = "LinearAnglePercentage"> </ p>
<!-Specify linear gradient color gradient direction->
<p id = "LinearAngle"> </ p>
<!-Set the gradient from top right to bottom left->
<p id = "LinearTopRight"> </ p>
  
<!-Floating p line breaks, the p width, height and border are specified here to cover the p uniform CSS style defined above
 You can try to remove the specified p width and height and borders to see the effect->
<p style = "width: 0; height: 0; border: none; clear: both"> </ p>
<!-Circular radial gradient with center point as center->
<p id = "RadialCenterCircle"> </ p>
<!-Radial gradient radius length: the length from the center of the circle to the nearest edge from the center of the circle->
<p id = "RadialClosestSide"> </ p>
<!-Radial gradient radius length: the length from the center of the circle to the farthest side from the center of the circle->
<p id = "RadialFarthestSide"> </ p>
<!-The left side is the horizontal coordinate value of the radial gradient center, and the top side is the vertical gradient center value->
<p id = "RadialRightTop"> </ p>
<!-Specify the center and radius of the radial gradient at the same time->
<p id = "RadialRadiusCenter"> </ p>
<!-Radial gradient combination->
<p id = "RadialGroup"> </ p>
  
<p style = "width: 0; height: 0; border: none; clear: both"> </ p>
<!-Specify a repeating linear gradient at the beginning and end of the color->
<p id = "RepeatingLinearPercentage"> </ p>
<!-Repeating linear gradient from left to right->
<p id = "RepeatingLinearRight"> </ p>
<!-Repeated linear gradient with a gradient angle of 45 degrees->
<p id = "RepeatingLinearAngle"> </ p>
<!-Repeating linear gradient from bottom left to top right->
<p id = "RepeatingLinearBottomLeft"> </ p>
  
<p style = "width: 0; height: 0; border: none; clear: both"> </ p>
<!-Circular repeating radial gradient->
<p id = "RepeatingRadialCircle"> </ p>
<!-Repeated radial gradient from top left to bottom right with gradient direction->
<p id = "RepeatingRadialTopLeft"> </ p>
<!-Repeat radial gradient: the length of the gradient radius is the distance from the center of the circle to the corner closest to the center of the circle->
<p id = "RepeatingRadialClosestCorner"> </ p>
  
</ body>
</ html>
The above is the entire content of this article, I hope it will be helpful to everyone's learning, please pay attention to topic.alibabacloud.com for more related content!