Deep understanding of CSS radial gradient radial-gradient

xTable of contents [1] definition [2] Ellipse Center [3] Ellipse type [4] ellipse size [5] Color label [6] repeating gradient [7] other front words

This article describes the linear gradient, which is followed by the content of the radial gradient

Defined

a radial gradient is actually an elliptical gradient, and a circle is just a special ellipse. The radial gradient spreads outwards from the center point in an oval shape, and the implementation of the gradient consists of two parts: Ellipse and color tag. The ellipse section is used to control the position, size, and shape of the radial gradient. The Color label section contains a color value and a position to control the color change of the gradient.

[Note that]safari4-5, ios3.2-4.3, android2.1-3 only support linear gradients and need to add-webkit-;safari5.1-6, ios5.1-6.1, android4-4.3 supports linear and radial gradients, and requires adding-webkit-;ie10+ and other high-version browsers to support standard notation

// standard notation radial-gradient ([[<shape>| | <size>]? [at <position>,]?<color-stop>[,<color-stop>]+]//-webkit-old version radial gradient notation -webkit-radial-gradient ([<position>| | <angle>,]? [<shape>| | <size>,]>?<color-stop>[,<color-stop>]+)

Elliptic

The radial gradient is mainly influenced by the three parameters of <position>, <shape>, <size>, and controls the center, shape and size of the ellipse, respectively.

Position

　　Defines the center of the gradient, by default the center center

<POSITION>: X-Axis Y-axis

X-Axis:<length> | <percentage> | Left | Center | righty shaft:<length> | <percentage> | Top | Center | Bottom

[note] Similar to linear gradients, older versions of the-webkit-kernel browser do not support the writing of at <position>, only support the wording of <position>

"1" keyword

x-    axis 0  -  0y-axis    

"2" value

The x-axis value represents the offset of the x-axis from 0 points (the upper-left corner of the gradient box), and the y-axis value represents the offset from 0 points on the y-axis.

"3" percent

Where the percentage of the x-axis is relative to the width of the gradient box, and the percentage of the y-axis is relative to the height of the gradient box. The width height of the gradient box is determined by the Background-size

"4" Single value

When there is only one value, the default second value is Center

Shape

The shape that defines the gradient is circle circle or oval ellipse. Default is Ellipse

<shape>: Circle | Ellipse

Size

Defines the size of the gradient. Default is Farthest-corner

"1" keyword

<size>: closest-side | Closest-corner | Farthest-side | Farthest-corner

closest-side: Radius from center to nearest edge closest-corner: Radius from center to nearest corner farthest-side: radius from center to farthest edge farthest- Side: Radius from center to most far corner

Top left is nearest corner, top right is nearest edge, bottom left is far corner, bottom right is farthest edge

"2" Round

If <shape> is circle, <size> can be set to <length>, representing diameter, 0% for center, and 100% for points with radius from center point

[note] cannot be negative or set a percentage

[Note that the]webkit kernel browser supports the use of CSS to set round <length> <size>, but does not support JavaScript changing its value; for Safari, only the radius is written before the Circle keyword to recognize

The following demo only ie10+ and Firefox can run properly

"3" Ellipse

If <shape> is ellipse or not set, <size> can be set to <length> or <PERCENTAGE>, the first value represents the horizontal diameter, and the second value represents the vertical diameter. Percentage relative to the size of the radial gradient container

[note] If there is only one value, it means that the horizontal and vertical diameters are the same because the circle is a special ellipse, so a value cannot be a percentage

[note] A,<size> value similar to a circle cannot be negative because it represents a diameter

[Important] because the WebKit browser renders abnormally when using the circle or ellipse keyword, you can use circle without writing the shape (default to Ellipse) and substituting an ellipse with the same horizontal and vertical diameters

Color label

The same parts of the linear gradient are no longer duplicated, and only the different parts are described here. Because the position at 100% does not sometimes fill the gradient area, the browser defaults to the color of the last color label to fill the gradient area

<color-stop> = <color> [<percentage> | <length>]?

Repeating gradients

Repeating the gradient allows for a repetitive effect of the radial gradient, allowing the color label to repeat infinitely in the elliptical direction for some special effects

[note] Repeating gradients only take effect if the two color positions are not at 0% or 100%

 - (%); background);

Other

The radial gradient is similar to the multi-background and application scenario for linear gradients. However, the radial gradient does not achieve IE compatibility.

Deep understanding of CSS radial gradient radial-gradient