How to write css gradient color? css linear gradient syntax-CSS Tutorial-php.cn

How to write css gradient color? css linear gradient syntax

云罗郡主

Release： 2018-11-19 11:54:22

forward

5553 people have browsed it

#This article brings you how to write css gradient color? CSS linear gradient syntax has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Introduction to linear gradient

In CSS3, linear gradient refers to a gradient on a straight line. In web pages, most gradient effects are linear gradients.

Syntax:

background:linear-gradient（方向，开始颜色，结束颜色）；

Copy after login

Description:

There are two types of direction values for linear gradients, one is to use angle (deg), and the other is to use keywords:

How to write css gradient color? css linear gradient syntax The second parameter and the third parameter represent the start color and end color. The values can be keywords, hexadecimal color values, RGBA colors, etc. You can use an online palette to get color values. Linear gradients can have multiple color values.

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3线性渐变</title>
    <style type="text/css">
        div
        {
            width:200px;
            height:150px;
            background:linear-gradient(to right,blue,yellow);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copy after login

The effect is as follows:

How to write css gradient color? css linear gradient syntax

Analysis:

“background: linear-gradient (to right ,blue,yellow);" means the linear gradient direction is "from left to right", the starting color is blue (blue), and the ending color is yellow (yellow).

If you use "background: linear-gradient (to left, blue, yellow);", the browser preview effect is as follows:

How to write css gradient color? css linear gradient syntax

Be special here Pay attention to the direction of the linear gradient. If the color value is the same, the actual effect will be different due to the different gradient directions.

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3线性渐变</title>
    <style type="text/css">
        div
        {
            width:200px;
            height:150px;
            background:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copy after login

The effect is as follows:

How to write css gradient color? css linear gradient syntax

The above is how to write css gradient color? A complete introduction to css linear gradient syntax. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to write css gradient color? css linear gradient syntax. For more information, please follow other related articles on the PHP Chinese website!