linear-gradient 沿直线过渡,radial-gradient 从中心向外辐射,conic-gradient 则是绕中心点「顺时针扫过」过渡。语法 conic-gradient(red 0deg, blue 120deg, green 240deg, red 360deg),颜色后面跟的是角度。
实战价值极高:一个 conic-gradient 就能画饼图(硬色阶用 to 关键字)、配合 mask 或双层 div 镂空中心就能画环形图,配合 animation 旋转角度就是加载 spinner——完全不需要 SVG 或 canvas。
<style> .pie { width: 130px; height: 130px; border-radius: 50%; background: conic-gradient(#4a9eff 0deg 120deg, #f778ba 120deg 240deg, #39c5cf 240deg 360deg); } </style> <div class="pie"></div>