携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
先看看最终效果:
HSL颜色
| 关键字 | 名词解释 |
|---|---|
| HSL色彩模式 | 就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色。 |
| HSL(H,S,L)取值 | H：Hue(色调)，0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360；S： Saturation(饱和度)，取值为：0.0% - 100.0%；L：Lightness(亮度)，取值为：0.0% - 100.0%。（HSL颜色的两个百分比值必须同时包含饱和度和亮度值才能正常显示） |
| 兼容性 | HSL被现代浏览器较好的支持，而且不需要任何前缀，IE6-IE7不支持;IE8支持该方式。 |
从色盘的顶部开始顺时针方向旋转，0(或360度)表示红色，从60度开始，分别是：黄色、绿色、青色、蓝色、洋红和红色。
HSL饱和度值: hsl(45,x%,50%)
HSL亮度值: hsl(90,100%,x%)
CSS变量
CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称，不能包含$，[，^，(，%等字符,可以是中文，日文或者韩文, 可参考详情
实例要点解析
一、 CSS属性值范围溢出边界渲染特性：也就是说，css只要格式正确，超出范围也会渲染，而渲染的值就是合法边界值：
.example1 {
color: hsl(0, 0%, -100%); /* 解析为 hsl(0, 0%, 0%), 黑色 */
}
.example2 {
color: hsl(0, 0%, 200%); /* 解析为 hsl(0, 0%, 100%), 白色 */
}
二、var变量传递给calc实现复杂计算：目前市面上较受欢迎的两个亮度计算方案：
sRGB Luma (ITU Rec. 709):L = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255W3C method (working draft):L = (red * 0.299 + green * 0.587 + blue * 0.114) / 255
至此，更炫的配色方案就此诞生（PS，博主已经在项目中实践使用了哦😍）
