Home > Article > Web Front-end > Teach you how to draw a circle with a gradient border using CSS!
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.
<!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: '';
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:
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 "
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!