Teach you how to draw a circle with a gradient border using CSS!-CSS Tutorial-php.cn

Teach you how to draw a circle with a gradient border using CSS!

藏色散人

Release： 2021-08-27 16:17:52

Original

3516 people have browsed it

In the previous article "Using HTML/CSS to create interesting dynamic wavy text lines", I introduced how to use HTML/CSS to create dynamic wavy text lines. Interested friends can Go and find out~

This article will continue to introduce to you how to use css to realize a circle with a gradient border.

First of all, let me give you a brief introduction to the implementation idea: I will create two divs, one is an external div with the class name outer_circle, and the other is the class name inner_circle# The inner div of ##; the outer div contains a large circle with a gradient color, and the inner div contains a small white circle that serves as the inner end of the circle, creating the border of the circle.

The complete code is directly shown below:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer_circle {
            position: relative;
            margin: 50px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #ffffff;
        }

        .inner_circle {
            background-image: linear-gradient(
                    to bottom, rgb(123, 93, 255) 0%,
                    rgb(56, 225, 255) 100%);
            content: &#39;&#39;;
            position: absolute;
            top: -20px;
            bottom: -20px;
            right: -20px;
            left: -20px;
            z-index: -1;
            border-radius: inherit;
        }
    </style>
</head>

<body>

<div class="outer_circle">
    <div class="inner_circle"></div>
</div>
</body>

</html>

Copy after login

The effect is shown below:

Teach you how to draw a circle with a gradient border using CSS!

In the above code we mainly use CSS

linear-gradient()The function draws a circle with a gradient border. The function of linear-gradient() is to create a picture that represents a linear gradient of two or more colors.

linear-gradient()Function syntax such as:

 .class_name { background-image: linear-gradient(direction, color1, color2 }

Copy after login

Parameters:

$direction: Specify the direction of gradient movement.

$color1: Specify the first color scale.

$color2: It specifies the second color scale.

Other usage means:

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

Copy after login

The PHP Chinese website platform has a lot of video teaching resources. Everyone is welcome to learn "

css Video Tutorial"!

The above is the detailed content of Teach you how to draw a circle with a gradient border using CSS!. For more information, please follow other related articles on the PHP Chinese website!