Linear gradient of CSS3

A, definitions,

The CSS Linear-gradient () function is used to create an image that represents a linear gradient of two or more colors. The result belongs to the

data type, which is a special
data type.

The concept description

A linear gradient has two lines and four points to understand

• Gradient line (gradient line) : indicates the direction of the gradient, the line between the starting point and the ending point
• Coloring line: the coloring line perpendicular to the gradient line in the same quadrant, and the color of the line is consistent with the color of the coloring point
• Shading point: The point where the gradient line intersects the shading line
• Starting point: The starting point is the point on the gradient line that represents the starting color value. The starting point is defined by the intersection between the gradient line and the vertical line that crosses the container vertex
• Endpoint: Endpoint is the point on the gradient line representing the final color value, which is the point of symmetry of the starting point with respect to the center of the container
• Stop point: When defining a gradient, describe the final position of its color. this point will be the pure definition color

The gradient line is defined by the center of the box containing the gradient image and an Angle, from top to bottom by default.

Second, basic grammar

linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> );
Copy the code

The first parameter

The first parameter is optional and represents the direction of the gradient line. There are two optional values

0. <side-or-corner>liketo left

It consists of the word to and at most two keywords (left, right, top, bottom). The first keyword represents horizontal direction and the second represents vertical direction. If not specified, the default is to bottom.

2. <angle>The Angle value, e.g0deg

Direction value, the value of 0deg corresponds to pointing to the top (analogous to to top) and continuing clockwise rotation.

The rest of the parameters

The following parameters are a list of gradient values. You can have more than one or

0. <linear-color-stop>

Specify a color and a stop point. There can be more than one stop point in the format red 10px 20%. Termination points are optional and can be in pixels and percentages. If not, follow these rules

There is also a special value of 0. When the termination value is 0, the same value as the previous termination value is taken, as in

linear-gradient(to right, #000 50%, #fff 0); // # FFF terminates at 50%Copy the code

2. <color-hint>

By default, the midpoint is the middle of the end point and the end point. You can set an interpolation to redefine the midpoint. Interpolation is in pixels or percentages. And there can only be one interpolation before two color definitions.

linear-gradient(orange, green); // By default, the intermediate point of the transition is 50% linear-gradient(orange, 30%, green); // Move the intermediate point to 30% by interpolation, so that there are more green onesCopy the code

Three, rules,

0. Starting point color: determined by the first linear color defined, regardless of where the end point is defined. The starting color is zerored

linear-gradient(red 30%, orange, green); // The top 30% of the container is pure red, then it gradients to orange, following the rule of the median value, 65% of the container is pure orange Linear-gradient (red, orange, green); // The top part of the container starts from solid red and changes from 0% to orange, and 50% of the container is solid orangeCopy the code

2. End color value: The end value is determined by the last linear color. The end color is defined as followsgreen

linear-gradient(red 30%, orange 60%, green);
Copy the code

3. Extension of termination point: if gradient is defined as the last one, the color of the remaining space after that is the same color. The colors in the remaining 50% space of the container below aregreen

linear-gradient(red 10%, orange 30%, green 50%);
Copy the code

4. Color gradient length: the interval between the start point and the stop point or the last stop point and the next stop point.

   • The rate of gradient is also determined by the midpoint of the gradient length, which is the default midpoint of the gradient length, and can also be determined by<color-hint>Attribute customization
   • If the colors of two identical stop points are defined, a stiff line is formed at that stop point

linear-gradient(red 30%, orange 30%, green); // Red and orange are stiff transitions, and orange to green is a gradual transition with a mid-point of 65%Copy the code

5. Gradient level: the previous gradient definition has higher priority than the next gradient definition

linear-gradient(red 40%, orange 30%); // The first 40% is red, and the rest is orange. Instead of red ending at 30%!Copy the code

Four, some examples

1. Grid lines

background-image: Linear-gradient (to right, transparent 9px, rgba(0, 0, 0, 0.2) 9px), linear-gradient(to bottom, transparent 9px, rgba(0, 0, 0, 0.2) 9px) 0, 0, 0.4) 9 px); background-size: 10px 10px;Copy the code

2. A zebra crossing

  width: 315px;
  height: 200px;
  background-image: linear-gradient(to right, #000 50%, #fff 50%);
  background-size: 30px;
Copy the code

3. A gradient

width: 300px; height: 200px; background-image: Linear-gradient (45DEg, # CC95C0 25%, # DBD4B4 0 50%, # CC95C0 50% 75%, # DBD4B4 0 /* 0); background-size: 50px 50px;Copy the code

Five, the implementation

Canvas for simple implementation of gradient rendering rules. Visible demo, canvas drawing on the left, CSS on the right, value is

  background-image: linear-gradient(red, yellow 20%, blue 60%, orange 50%, darkgreen 90%);
Copy the code

Not a complete version, only a partial implementation of the rules