How to set background radial gradient in html

In HTML, you can use the radial-gradient function to set a radial gradient. You only need to add "background:radial-gradient (starting position, shape, size, color, color, color) to the background attribute of the element. "That's it.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Radial gradient: the transition from one point to the surrounding colors.

The radial gradient is as shown in the figure:

# Syntax: (must add browser prefix)

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center: the starting point of the gradient Position, which can be a percentage. The default is the center of the graphic.

shape: The shape of the gradient, ellipse represents an ellipse, and circle represents a circle. The default is ellipse. If the element shape is a square element, ellipse and circle will be displayed the same.

size: Regarding the size of the radial gradient:

closest-side closest side

farthest-side farthest side

closest-corner closest corner

farthest-corner Farthest corner

The implementation code is as follows:

p{
            width:500px;
            height:300px;
            margin:40px auto;
            background:-webkit-radial-gradient(center,closest-corner,red,yellow,green);
        }

Extended information:

Linear gradient: from one direction to Color change from one direction to another

Standard mode syntax (without adding browser prefix):

background:linear-gradient(direction,color-stop1,color-stop2)

Note: The default value of direction is to bottom, that is, from top to bottom

stop: The distribution position of the color, the default is uniform distribution (even distribution)

Syntax of compatibility mode (add browser prefix):

background:-webkit-linear-gradient(direction,color-stop1,color-stop2)

Description: The direction value cannot be added to, this value indicates that the color starts to gradient from this direction, contrary to the above

stop: the distribution position of the color, the default is uniform distribution (average distribution)

Gradient direction: the previous implementation of up and down or left and right Gradient, next we will introduce the diagonal gradient

1. to left \ to right \ to top (gradient up and down or left and right)

2. to left top \ to right bottom (diagonal Line gradient)

3. Changes in gradient line angle

For example: Standard mode: 40deg 40 degrees

Compatible mode: 90 - 40deg

Linear gradient : Color distribution (color area size):

linear-gradient (direction, color 1 20%, color 2 30%, color 3)

to 20%, this position is still color 1 After 20%, start the gradient to color 2

The code is as follows:

div{
            width:500px;
            height:300px;
            margin:100px auto;
            background-image: -webkit-linear-gradient(left, red, yellow);
        }

Recommended learning:html video tutorial

The above is the detailed content of How to set background radial gradient in html. For more information, please follow other related articles on the PHP Chinese website!