How to implement background color gradient in CSS3? (Pictures + Videos)-CSS Knowledge-php.cn

How to implement background color gradient in CSS3? (Pictures + Videos)

藏色散人

Release： 2018-10-16 09:52:35

Original

6603 people have browsed it

This article mainly introduces to you a summary of the implementation methods of css3 background gradient.

In the process of front-end development, in order to enrich the website style content, the background color gradient has a very good visual effect. The so-called CSS3 gradient (gradients) allows you to display a smooth transition between two or more specified colors.

For front-end scholars who have already started, the implementation of css3 background gradient is definitely very simple. But for novice friends, it may not be clear yet.

Below we will combine simple code examples to summarize the css3 method to achieve the background color gradient effect.

The code examples are as follows:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3背景渐变实例</title>
<head>
    <style>
        #grad{
            background: black;
            /* 第一种：-webkit-linear-gradient()，统配各种浏览器*/
            background: -webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,1));
            /* 第二种：-o-linear-gradient，Opera浏览器*/
            background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(0,0,0,1));
            /* 第三种：-moz-linear-gradient，火狐浏览器*/
            background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(0,0,0,1));
            /* 第四种：linear-gradient()，统配各种浏览器*/
            background: linear-gradient(to left,rgba(255,0,0,0),rgba(0,0,0,1));
        }
    </style>
</head>
<body id="grad">
</body>
</html>

Copy after login

Here we introduce four methods to achieve background color gradient based on browser compatibility. It is recommended to use the first and fourth methods to avoid browser incompatibility.

The first attribute:

-webkit-linear-gradient() represents linear gradients (Linear Gradients)-down/up/ Left/right/diagonally.

In this example, its parameters represent a linear gradient starting from the left. It starts out transparent and slowly transitions to black.

The effect is as shown below:

How to implement background color gradient in CSS3? (Pictures + Videos)

##The fourth attribute:

linear-gradient() also represents linearity Gradients are nothing but standard syntax.

In this example, its parameters represent a linear gradient starting from left to right, starting from black, and slowly transitioning to transparent.

How to implement background color gradient in CSS3? (Pictures + Videos)

The second and third methods mentioned above are not recommended. You can simply understand them.

Note: In order to create a linear gradient, you must define at least two color nodes. Color nodes are the colors you want to show a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).

This article is a brief introduction to the implementation of background color gradient in css3. It is very simple and easy to understand. I hope it will be helpful to friends in need!

If you want to learn more about front-end related knowledge, you can follow the PHP Chinese website

css3 video tutorial, Bootstrap video tutorial and other related front-end tutorials. Everyone is welcome to learn and refer to it!

The above is the detailed content of How to implement background color gradient in CSS3? (Pictures + Videos). For more information, please follow other related articles on the PHP Chinese website!