[toc] ## transparent IE9+开始支持`color:transparent` ## currentColor ``` .test{ color:red; border:2px solid; } ``` 这里的border省略了颜色值的设置，这个颜色值会和color值一个颜色 它相当于这么设置 ``` .test{ color:red; border:2px solid currentColor; } ``` ## hsl,hsla IE9+开始支持 hsl颜色的3个字母有着自己的含义，其中 h表示`hue`，色调的意思。取值0~360，大致按照数值红、橙、黄、绿、青、蓝、紫变化 s表示`saturation`，饱和度的意思，用0~100%表示，值越大饱和度越高，颜色越亮，通常我们评价某设计"亮瞎我们的眼"，就是这个设计颜色饱和度太高 l表示`lightness`，亮度的意思，也用0~100%表示，值越高颜色越亮，100%就是白色，**50%则是正常亮度**，0%就是黑色。 hlsa则是再多了一个alpha透明通道 ### 区分饱和度和亮度 饱和度越低，世界越趋向于不是黑就是白的世界 亮度越低，黑色成分越多（越暗），反之白色成分越多(越亮)