如何使用 CSS 绘制带有渐变边框的圆？

CSS 用于创建具有不同颜色或渐变的各种形状和样式。在本文中，我们将学习如何绘制带有渐变边框的圆。

方法：我们将创建两个 div，一个是类为outer_circle 的外部 div，另一个是类为inner_circle 的内部 div。外部 div 包含带有渐变颜色的大圆圈，内部 div 包含一个白色小圆圈，作为圆圈的内端，创建圆圈的边界。线性渐变是一个 CSS函数，我们将使用它来设置线性渐变作为背景图像。

句法：

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

参数：该函数接受上面提到和下面描述的三个参数：

• $direction：指定渐变移动的方向。
• $color1：指定第一个色标。
• $color2：它指定第二个色标。

程序：我们可以使用 linear-gradient函数绘制一个带有渐变边框的圆，如下所示：

输出：