张鑫旭大神博客学习

/* 起始角度 中心位置 , 角渐变断点 */
.conic-gradient([ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

/* 示例 */
background-image: conic-gradient(white, deepskyblue);
/* 渐变起始角度改成45度，中心点位置移动到相对元素左上角25%的位置 */
background-image: conic-gradient(from 45deg at 25% 25%, white, deepskyblue)
/* 白色到天空蓝再到白色，45度角处蓝色最深 */
background-image: conic-gradient(white, deepskyblue 45deg, white);
/* 白色到天空蓝再到白色，渐变中间颜色移动到了12.5%的位置（原来是在50%位置处） */
background-image: conic-gradient(white, 12.5%, deepskyblue);

/* 饼图 */
.pie {
    width: 150px; height: 150px;
    border-radius: 50%;
    background: conic-gradient(yellowgreen 40%, gold 0deg 75%, deepskyblue 0deg);   
}
/* 代码部分的'gold 0deg 75%'这里就是渐变范围语法（IE浏览器不支持），这是这里一个使用了角度值，一个是百分比值，这里0deg换成0%也是一样的效果，并不是必须使用角度值。
然后，理论上，这里设置的数值应该是40%，或者144deg，而不是0deg，不过渐变断点有个特性，如果后面的渐变断点位置值比前面的渐变断点位置值小的时候，后面的渐变断点的位置值会按照前面较大的渐变断点位置值渲染。
于是乎，'gold 0deg 75%'这里的'0deg'就会使用'yellowgreen 40%'中的'40%'位置值进行渲染，同理，'deepskyblue 0deg'实际是按照'deepskyblue 75%'渲染的。
也就是说，如果我们想要渐变颜色界限分明，只要设置起始渐变位置为0%就可以了，无需动脑子去计算，算是一个CSS实用小技巧。 */

/* 棋盘效果（PNG透明背景的灰白网格效果） */
.checkerboard {
    width: 300px; height: 160px;
    background: conic-gradient(#eee 25%, white 0deg 50%, #eee 0deg 75%, white 0deg) 0 / 20px 20px;
}

/* 锥形渐变实现很实用的loading效果 */
.loading {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: conic-gradient(deepskyblue, 30%, white);
    --mask: radial-gradient(closest-side, transparent 75%, black 76%);
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
    animation: spin 1s linear infinite reverse;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}