CSS for background color gradients and text color gradients

1. Background color Gradient

A. Linear-gradient: Creates an image with a linear gradient.

Syntax:<linear-gradient> = linear-gradient ([[<angle> | To <side-or-corner>],]? <color-stop>[, < ; color-stop>]+)

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-left. Equivalent: 270deg

to right:

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-stop> Specifies the starting and ending colors for the gradient:

<color>:

Specifies the color.

<length>:

Specify the starting and ending color position with a length value. Negative values are not allowed

<percentage>:

Specify the start and end

color position in percent.

Compatible: This property is supported by other browsers, including mobile browsers, in addition to ie8,9, which is swept into the history heap, and opera Mini is not compatible.

If the direction of the gradient is diagonal, you can to top right do so with a multi-keyword approach. Such as:

Background:linear-gradient (to top right, #f6f5f0, #fefefd);

If there are multiple color gradients, the parameters of the color can have more than one (1):

Background:linear-gradient (to top right, #CDDC39, #8BC34A, #FFEB3B);

You can specify the position of the color gradient (2):

Background:linear-gradient (to top right, #CDDC39 0, #8BC34A 25%, #FFEB3B 100%);

Fig. 1 Fig. 2

B. Radial-gradient: Create an image with a radial gradient.

Syntax:<radial-gradient> = radial-gradient ([[<shape> | | <size>] [at <position>]?, | at <posit Ion>,]?<color-stop>[, <color-stop>]+)

<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

<percentage>①:

Specifies the horizontal value of the center of the radial gradient with a percentage. Can be a negative value.

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

Left

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

Center①:

Sets the horizontal value of the center of the center of the radial gradient.

Right

Sets the horizontal axis value of the center of the radial gradient on the right.

<percentage>②:

Specifies the ordinate 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 the length value. Can be a negative value.

Top

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

Center②:

Sets the ordinate value between the center of the center of the radial gradient.

Bottom

sets the ordinate value for the center of the radial gradient at the bottom.

<shape> determine the type of circle

Circle

Specify a radial gradient for a circle

Ellipse

Specifies the radial gradient of the ellipse.

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

Closest-side:

Specifies that the radial gradient has a radius length from the center to the nearest edge of the center

Closest-corner:

Specifies the radius length of the radial gradient from the center to the nearest corner from the center point

Farthest-side:

Specifies the radius length of the radial gradient from the center to the edge farthest from the center

Farthest-corner:

Specifies the radius length of the radial gradient from the center to the point farthest from the center

<circle-size> Circle accepts this value as size

<length>:

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

<ellipse-size> Ellipse Accept 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.

<color-stop> specifies the starting and ending colors for the gradient:

<color>:

Specifies the color.

<length>:

Specify the starting and ending color position with a length value. Negative values are not allowed

<percentage>:

Specify the start and end

color position in percent. Negative values are not allowed

Use examples to illustrate (3):

Background:radial-gradient (Circle, #CDDC39, #8BC34A);

The first parameter has two values: Circle Circle, Ellipse ellipse. The default gradient is from the center point to the surrounding. You can also use a two-length number to represent a circle, such as 50px 50px. There are several ways to do this:

Circle at center (or left right)

Circle at 50% (this percentage number can be changed to any desired position)

Circle Farthest-corner (or 3 other values.) ）

Figure 3

2. Text color Gradient

<gradient>: Can be applied to all attributes that accept images, allowing color gradients to be implemented using simple syntax so that the UA automatically generates images on the rendered page.

Syntax:<gradient> = linear-gradient () | Repeating-linear-gradient () | Radial-gradient () | Repeating-radial-gradient ()

Note: Must be generated in a box with a size. If the box has no dimensions, the gradient effect cannot be rendered.

can function on any attribute that can accept an image:

Background-image:-webkit-gradient (linear, left 0, right 0, from (RGB (4, 94, in)), to (RGB (1, 152, 216)); List-style-image:-webkit-gradient (linear, left 0, right 0, from (RGB (4, 94, in)), to (RGB (1, 152, 216));

Text color gradients are cumbersome and less compatible:

    Background-image:-webkit-gradient (linear, left 0, right 0, from (RGB (4, 94, in)), to (RGB (1, 216)));    / * must prefix-webkit-to support this text value *    / /*text-fill-color overrides color's defined font colors: */

None of the above three attributes can complete a text gradient. ：

Compatibility:

Text-fill-color,ie is not compatible, indeed. The mobile UC Browser is also incompatible.

-webkit-background-clip: text; 非正式属性，目前（2017-07-07）仅仅FF、Chrome、Safari支持，并且必须带前缀。

So, if your target users are likely to use IE browser, then, you need to write an IE under the normal browsing code:

    <!-- [If ie]>         -

CSS for background color gradients and text color gradients