How to achieve radial gradient effect in CSS3-CSS Tutorial-php.cn

How to achieve radial gradient effect in CSS3

藏色散人

Release： 2021-04-22 16:25:36

Original

5613 people have browsed it

CSS3 method to achieve radial gradient effect: first create an HTML sample file; then create a div in the body; finally implement the radial gradient effect through the "background:radial-gradient(#4b6c9c,#5ac4ed);" style Towards the gradient effect.

How to achieve radial gradient effect in CSS3

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

Using css3 to achieve the background gradient effect can enrich the content of our web pages and improve the user's visual effect. Of course, more importantly, improve user experience! We can use the radial-gradient attribute in CSS3 to achieve a radial gradient effect.

So in the previous article, we have introduced to you CSS3 to achieve linear gradient effect.

Let’s continue to introduce to you the effect of radial gradient in css3 through simple examples.

The so-called radial gradients are defined starting from their centers.

The code example is as follows:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>CSS3创建径向渐变效果示例</title>
    <style type="text/css">
        .container{
            text-align:center;
            padding:20px 0;
            width:960px;
            margin: 0 auto;
        }

        .container div{
            width:200px;
            height:150px;
            display:inline-block;
            margin:2px;
            color:#ec8007;
            vertical-align: top;
            line-height: 230px;
            font-size: 20px;
        }

        .radial{
            background:radial-gradient(#4b6c9c,#5ac4ed);
        }

    </style>
</head>
<body>
<div class="container">
       <div class="radial">Radial径向渐变</div>
    </div>
</body>
</html>

Copy after login

The gradient effect is as shown below:

How to achieve radial gradient effect in CSS3

The gradient effect in the picture is from the center to the color #4b6c9c Transition to color #5ac4ed.

How to achieve radial gradient effect in CSS3

The picture above is the transition from color #ff5309 to #efdf0e.

radial-gradient attribute syntax:

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

Copy after login

By default, the radial gradient method is that the color nodes are evenly distributed, and the shape of the gradient is an ellipse. .

To implement a radial gradient, you must set at least two different colors. Of course you can customize the center and shape of the gradient.

Note:

The center of the gradient is center, which means it is at the center point;

The shape of the gradient is ellipse, which means ellipse;

The size of the gradient is farthest-corner, indicating to the farthest corner.

This article is an introduction to the method of CSS3 to achieve radial gradient effect. It is also very simple and easy to understand. I hope it will be helpful to friends in need!

Recommended reference study: "CSS3 Tutorial"

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