CSS实现渐变色(css实现渐变色边框动态旋转)
使用CSS实现渐变色：
在之前讲解Canvas的文章中我们还通过canvas实现了各种渐变，可以看看哦~
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
CSS 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
（1）渐变色之线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
linear-gradient()函数用于实现线性渐变
注意：颜色的渐变实现是靠渐变的图像实现的，在函数里可以放多个颜色实现渐变
渐变的效果默认是从上往下渐变填入的颜色 to right,to left,to top,to buttom right(从左上往右下渐变)
也可以以一定角度进行渐变，格式为：度数deg,比如：90deg
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变色之线性渐变</title> <style> #div1{ width:300px; height: 300px; background-image: linear-gradient(to left,skyblue,pink); } </style> </head> <body> <div id="div1" class="div2"> </div> </body> </html> 复制代码（2）渐变色之径向渐变
radial-gradient()函数用于实现径向渐变
注意：颜色的渐变实现都是靠渐变的图像实现的
默认是从最中心向外发散进行渐变（ellipse是椭圆形状的渐变）
circle(形状变为圆)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变色之径向渐变</title> <style> #div1{ width: 200px; height: 300px; background-image: radial-gradient(ellipse,skyblue,pink,white); } </style> </head> <body> <div id="div1"> </div> </body> </html> 复制代码（3）拓展一个文本渐变色的实现：
给背景设置渐变色
默认文字的颜色渐变是从上往下渐变的
改渐变的方向的话在颜色前面加，比如：to right
文字本身是不能设置渐变的，我们是通过设置背景的渐变来实现文字的渐变的!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变色之文字渐变</title> <style> span{ background-image: linear-gradient(to right,blue,black); /*规定这个背景渐变色绘制的区域 在此设置为文本那个区域*/ -webkit-background-clip: text; /*把原本的文字设置为透明的*/ color: transparent; } </style> </head> <body> <span>我是渐变的文字，我超级帅！</span> </body> </html> 复制代码????In The End！
| 从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的你！ |
|---|
本博主会持续更新爬虫基础分栏及爬虫实战分栏，认真仔细看完本文的小伙伴们，可以点赞收藏并评论出你们的读后感。并可关注本博主，在今后的日子里阅读更多爬虫文！
如有错误或者言语不恰当的地方可在评论区指出，谢谢！
如转载此文请联系我征得本人同意，并标注出处及本博主名，谢谢 ！
作者：孤寒者
链接：https://juejin.cn/post/7031549382705020965