在之前的篇幅中介绍过css的线性渐变linear-gradient()和径向渐变radial-gradient()，如果你对这两种渐变还不了解的话，可以看一下之前录制的视频教程。
往期文档地址：https://blog.csdn.net/qq_18798149/article/details/134389038
名词介绍：
这一节再介绍另一种渐变方法，conic-gradient()锥形渐变，所谓锥形渐变：它围绕一个中心点旋转，颜色沿着圆周方向变化，上个图可能看起来更直观。
用法说明：
使用一段css可以简单实现上面的这种效果，如下所示：
html部分
html
<div class="conic"></div>css部分
css
.conic{
width: 300px;
height: 300px;
border-radius: 50%;
background-image: conic-gradient(red,yellow,green,cyan,blue,magenta,red);
}只需要为背景background设置conic-gradient方法，在函数内设置想要锥形渐变的颜色，即可达到如下图所示效果。
按照如上所示的方法，可以做一些金属质感的纹理效果，如下图所示，只需要找好颜色，这种类型的效果很好实现，为了更好的调整锥形渐变的角度和范围，是可以为锥形渐变设置角度和范围的，上面的渐变同时还可以添加角度设置范围。
css
background-image: conic-gradient(red 0deg,yellow 60deg,green 120deg,cyan 180deg,blue 240deg,magenta 300deg,red 360deg);
这种效果实在是缺少美感，没什么太多的应用，下面我就结合在项目中常见的效果来应用一下conic-gradient锥形渐变，希望能通过下面更多属性的介绍，为大家添加更多的技能，操作这类效果更方便。
☀️应用一：放射线效果
这种效果见过没，很多的促销海报会用到这种背景，为海报增加视觉吸引力和空间感，相信大家见过这样的设计吧，放几张海报大家感受一下。
大家可以从海报中找到锥形放射线的位置吧，跑远了，怎么讲到设计上去了，我们来给大家贴一下代码怎么实现吧。
css
.radiation{
width: 300px;
height: 300px;
margin:100px;
background-image: conic-gradient(
#3772FF 0 10deg,
transparent 10deg 20deg,
#3772FF 10deg 30deg,
transparent 30deg 40deg,
.....
);
}如果0度和10度直接的颜色不同，会出现渐变混合的，放射线的边缘是比较清晰的，所以看上面代码就可以看出规律来了，给0度到10度设置第一个颜色，给10度到20度设置第二个颜色，给20度到30度设置第一个颜色，然后递增10度的方式依次设置，直到360度，这样会实现放射线的效果，但是会出现非常庞大的代码，其实css3给我们提供了另一个非常好用的方法。
repeating-conic-gradient()
可以来重复交替，就不需要我们手动去添加了，如下代码所示：
css
background: repeating-conic-gradient(
#3772FF 0deg 10deg,
transparent 10deg 20deg
); 通过这个重复方法就可以按照我们给定的两个或者更多颜色，按照我们的规律自动进行重复填满，省去我们自己计算的时间。
📀应用二：loading加载样式
如上这种loading渐变圆环转圈圈的效果，大家在一些网站都见过吧，原来想实现这种方法，你可能还需要使用图片，现在使用css的锥形渐变配合mask遮罩属性，然后添加animation即可实现此类效果，下面就来介绍一下。
1.HTML创建节点，css画一个锥形渐变
html
<div class="loading"></div>
css
.loading{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(transparent 0deg, transparent 60deg, #337EEF 360deg);
}设置一个锥形渐变，从0度-60度是透明色，60-360度自定义颜色，会获得如下图形效果。
2.用mask遮罩属性，将中心区域隐藏
mask遮罩，可以使用位图、矢量图，同时也支持使用渐变函数来进行遮罩，详细的mask遮罩文档可以查看下面链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask
css
.loading{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(transparent 0deg, transparent 60deg, #337EEF 360deg);
mask:radial-gradient(transparent calc(50% - 1px), #000 50%);
-webkit-mask:radial-gradient(transparent calc(50% - 1px), #000 50%);
}看上面代码，添加了mask属性，值是已经镜像渐变，这个径向渐变是一个从中心透明到黑色的圆环，效果可以放到background属性看看，如下图所示：
如果将这个渐变遮罩背景的锥形渐变，将会透明透明位置隐藏，不透明位置显示，两层一叠加，就会得到一个锥形渐变的圆环效果了，添加-webkit-mask是为了做低版本浏览器兼容的，这样不但浏览器支持，微信小程序也支持此mask遮罩效果，如下图所示：
3.keyframes定义关键帧，animation动起来
css
.loading{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(transparent 0deg, transparent 60deg, #337EEF 360deg);
mask:radial-gradient(transparent calc(50% - 1px), #000 50%);
-webkit-mask:radial-gradient(transparent calc(50% - 1px), #000 50%);
animation: rotate 0.6s linear infinite;
}
@keyframes rotate{
100%{
transform: rotate(360deg);
}
}
这样一个loading加载动画就做出来了，如果loading样式太大，你只需要设置width宽和height高即可缩小loading样式了。
应用三🔲：透明棋盘网格效果
上面这种效果大家见过没有，如果是一张png透明图，超出图片本身的区域会有黑白相间的透明网格作为背景，在我开发的咸虾米壁纸后台管理项目中，也用到了这种效果，超出规定区域的背景将使用黑白透明网格作为填充。https://www.bilibili.com/cheese/play/ss145273324
这个用途比较多，来看一下怎么实现的吧。
html
<div class="box">
<img src="./img.png" width="200">
</div>
css
.box{
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background-image: conic-gradient(#ccc 0 25%,#fff 25% 50%,#ccc 50% 75%,#fff 75%);
background-size: 16px 16px;
}
看上面代码，给背景设置锥形渐变可以使用角度也可以使用百分比，如果使用角度按照0~360deg，百分比0-100%，设置锥形渐变的四个区域，类似应用一里面的放射线效果。
最后还要设置一下background-size，指定一个黑白格的大小，默认是repeat重复，这样背白透明棋盘网格背景就做好了。
总结：
以上就是我对锥形渐变conic-gradient方法的总结，我常用到的就是以上三种应用，如果大家还有别的更好的玩法可以给我评论留言，我就继续进行补充的，在介绍这三种应用的时候也介绍了其他的属性，并没有详细的展开，同时也提供了链接供大家学习，如果不懂的复制到AI内也会给你解释明白的。
感谢大家的阅读，记得点赞支持一下哈~~