Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Use the gradient

CSS gradient is a new < Image > type added to the CSS3 Image Module. Gradients can be used with CSS

Create a smooth gradient between two colors. Instead of images, it speeds up page load times,

Reduce bandwidth usage. Also, because the gradient is generated directly by the browser, it looks like when the page is scaled

Better than images, so you can adjust your page layout more flexibly and easily.

Browsers support two types of gradients: Linear, defined by the linear-gradient function,

Radial gradient is defined by the radial gradient function.

What is a gradient

CSS tween is a new feature in the Image module of CSS3. Use CSS gradients instead in HTML pages

Introduce a gradient effect to images, which reduces HTML page loading time and bandwidth usage.

Since CSS gradients are generated directly by the browser, they look better when the HTML page is zoomed than when the image is zoomed,

This makes it possible to adjust the HTML layout more flexibly and easily.

There are two main types of gradients added in CSS3:

  • Linear gradient
  • Radial gradient
  • Repeat the gradient

Linear gradient composition

Linear gradients are defined by an axis (reference line) along which each point has an independent color. linear-

The gradient() function builds a gradient that is perpendicular to the base line, the color of which is determined by its perpendicular intersection

The color point on the reference line of.

The baseline is defined by the center point and an Angle of the element that contains the gradient effect container. Color on the base line

Values are defined by different points, including a start point, a stop point, and an optional midpoint between the two (midpoint)

There can be more than one. The starting point is the point at which the vertices of the reference line and container elements intersect the vertical line of the reference line

Righteousness.

The terminating point is defined as the point at which the nearest vertex of the reference line and the container element intersects the vertical line of the reference line.

Linear gradient grammar

The CSS linear-gradient() function is used to create an image that represents a linear gradient between two colors. The specific syntax structure is as follows:

linear-gradient(<angle> | <side-or-corner>, <color-stop>, <color-stop>+)
Copy the code

Parameter description of the above syntax:

  • The first parameter defines the direction of the linear gradient and the end of the gradient color.

    • Angle: Defines the direction of the gradient by Angle. 0 degrees means gradient from bottom to top, 90

      Degree means gradient from left to right. The Angle increases clockwise.

    • Side-or-corner: Define the direction of gradient by keyword. Has two keywords, one

      “Left or right” and “top” or “bottom”.

      The order of keywords does not matter and is optional.

  • The second and third parameters define the start and end points of the gradient color.

Browser Compatibility Issues

For older browsers, the Linear-gr adient() function is compatible by adding the prefix “prefix”.

/* Old syntax, prefixed and deprecated to support older browsers */
-prefix-linear-zgradient(<angle> | <side-or-corner>, <color-stop>, <color-stop>)
Copy the code

In addition to being compatible with older browsers, browsers with different engines offer different prefixes:

/* WebKit engine browsers (Chrome, Safari, Opera) */
-webkit-linear-gradient(<angle>| <side-or-corner>, <color-stop>, <color-stop>)
​
/* Gecko engine browser (Firefox) */
-moz-linear-gradient(<angle>| <side-or-corner>, <color-stop>, <color-stop>)
​
/* Trident engine browser (IE 10+) */
-ms-linear-gradient(<angle>| <side-or-corner>, <color-stop>, <color-stop>)
​
/* Presto engine browser (Opera) */
-o-linear-gradient(<angle> | <side-or-corner>, <color-stop>, <color-stop>)
Copy the code