HSL色彩模式是业界的色彩标准。它是通过色相（H）、饱和度（S）、明度（L）三个颜色通道的变化及其相互叠加来实现的。获得各种颜色。今天我们就来看看这个颜色模式，在CSS中能产生哪些神奇的变化，下面是渲染代码：https://codepen.io/woshilyy/p...糖葫芦一样，贴上代码下面的HTML：<跨度><跨度><跨度><跨度><跨度><跨度><跨度>1.给所有span一个stylespan{position:absolute;宽度：100px；高度：100px；背景：hsl(calc(deg/20*var(--n)),50%,90%);顶部：计算（120px*var（--n））；边界半径：50%；}2.使用伪类给圆圈添加线条span::before{content:"";位置：绝对；高度：20px；宽度：2px；背景：hsl(calc(360度/20*var(--n)),50%,90%);左：计算（（100px-2px）/2）；顶部：-20px；}三、给每个圆圈设置变量span:nth-child(1){--n:1;}span:nth-child(2){--n:2;}span:nth-child(3){--n:3;}span:nth-child(4){--n:4;}span:nth-child(5){--n:5;}span:nth-child(6){--n:6;}span:nth-child(7){--n:7;}span:nth-child(8){--n:8;}span:nth-child(9){--n:9;}span:nth-child(10){--n:10;}span:nth-child(11){--n:11;}span:nth-child(12){--n:12;}span:nth-child(13){--n:13;}跨度：第n个孩子（14）{--n:14;}span:nth-child(15){--n:15;}span:nth-child(16){--n:16;}span:nth-child(17){--n:17;}span:nth-child(18){--n:18;}span:nth-child(19){--n:19;}span:nth-child(20){--n:20;}通过这个简单的例子，你可以掌握hsl和css变量的用法
