Home > Article > Web Front-end > Teach you how to draw a circle with a gradient border using CSS!

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

藏色散人Original: 2021-08-27 16:16:543464browse

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>

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 }

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);

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use CSS3 to create practical loading animation effects (two types)Next article：Use CSS3 to create practical loading animation effects (two types)

See more

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

Related articles