How to achieve color gradient effect in css3-CSS Tutorial-php.cn

How to achieve color gradient effect in css3

王林

Release： 2020-11-16 14:54:14

Original

3553 people have browsed it

How to achieve color gradient effect in css3: You can use linear-gradient function and radial-gradient function to achieve linear gradient effect and radial gradient effect respectively, such as [linear-gradient(yellow, green)].

How to achieve color gradient effect in css3

There are two types of css3 gradients: css3 linear gradient and css3 radial gradient.

(Learning video sharing: css video tutorial)

1. Linear gradient color gradient

Function:

linear-gradient () function is used to create an image that represents a linear gradient of two or more colors.

Syntax:

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

Copy after login

Value:

direction Use the angle value to specify the direction (or angle) of the gradient.
color-stop1, color-stop2,... Used to specify the starting and ending colors of the gradient.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
    height: 200px;
    background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
    background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>

Copy after login

2. Radial gradient

function;

radial-gradient() function uses radial gradient Create "image".

The radial gradient is defined by the center point.

In order to create a radial gradient you must set two stop colors.

Syntax:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Copy after login

Value:

1. shape Determine the type of circle

ellipse ( Default): Specifies an elliptical radial gradient.
circle: Specify the radial gradient of the circle

##2, size Define the size of the gradient, possible values:

farthest-corner (default): Specify the radius length of the radial gradient from the center of the circle to the corner farthest from the center
closest-side: Specify the radial gradient The radius length is from the center of the circle to the side closest to the center
closest-corner: Specifies the radius length of the radial gradient from the center of the circle to the corner closest to the center
farthest-side: Specify the radius length of the radial gradient from the center of the circle to the side farthest from the center of the circle

3. Position defines the position of the gradient. Possible values:

center (default): Set the ordinate value in the center of the radial gradient circle.
top: Set the top to be the ordinate value of the center of the radial gradient circle.
bottom: Set the bottom to the ordinate value of the center of the radial gradient circle.

4. start-color, ..., last-color is used to specify the starting and ending colors of the gradient.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
    background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>

Copy after login

Related recommendations:

CSS tutorial

The above is the detailed content of How to achieve color gradient effect in css3. For more information, please follow other related articles on the PHP Chinese website!