本文将继续给大家介绍怎么用css实现一个带有 渐变边框 的 圆 。
首先我给大家 简单 说一下实现思路：我将创建两个 div，一个是类名为 outer_circle 的外部 div，另一个是类名为 inner_circle 的内部 div ；外部 div 包含带有渐变颜色的大圆圈，内部 div 包含一个 白色 小圆圈，作为圆圈的内端，创建圆圈的边界。
下面直接上完整代码：
<!DOCTY PE HTML>
<html>
<head>
< ;m eta charset="UTF-8">
<t IT le></title>
<style>
.outer_circle {
position: relative;
m arg in: 50px;
width: 100px;
h ei ght: 100px;
border-radius: 50%;
background: # ffffff;
}
.inner_circle {
background -i mage: linear-gra die nt(
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>效果如下图所示：
在上述代码中我们主要通过使用CSS linear-gradient() 函数 绘制 一个带有渐变边框的圆， linear-gradient() 函数的作用就是创建一个表示两种或多种颜色线性渐变的图片。
linear-gradient() 函数语法如：
.class_n am e { background-image: linear-gradient(direction, color1, color2 }参数：
$direction：指定渐变移动的 方向 。
$color1：指定第一个色标。
$color2：它指定第二个色标。
其他用法表示：
/* 从上到下，蓝色渐变到 红色 */ linear-gradient(blue, red ); /* 渐变轴为45度，从蓝色渐变到红色 */ linear-gradient(45 deg , blue, red); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); /* 从下到上，从蓝色 开始 渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);
PHP中文网平台有非常多的视频教学资 源 ，欢迎大家学习《 css视频教程 》！
以上就是教你用CSS绘制一个带有渐变边框的圆！的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 教你用CSS绘制一个带有渐变边框的圆！ 全部内容，希望文章能够帮你解决 教你用CSS绘制一个带有渐变边框的圆！ 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于教你用CSS绘制一个带有渐变边框的圆！的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did200142