• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • hsl()

    版本:CSS3

    hsl()函数符被定义为色相-饱和度-明度(Hue-saturation-lightness)模式。HSL 相比 RGB 的优点是更加直观:你可以估算你想要的颜色,然后微调。它也更易于创建相称的颜色集合。(通过保持相同的色相并改变明度/暗度和饱和度)。

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE9以上版本的浏览器都支持hsl()

    hsl()函数

    hsl(H,S,L)

    取值:

    色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度。这个角度作为一个无单位的<number>被给出。定义red=0=360,其它颜色分散于圆环,所以green=120,blue=240,以此类推。作为一个角度,它隐含像-120=240 和 480=120 这样的回环。

    饱和度和明度由百分数来表示。
    100%是满饱和度,而0%是一种灰度。
    100%明度是白色,0%明度是黑色,而50%明度是“一般的”。

    实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>document</title>
    	<style type="text/css">
    		div{
    			
    		background-color:hsl(360,50%,50%);
    
    		}
    
    	</style>
    </head>
    <body>
    	<div>hsl颜色值</div>
    	
    </body>
    </html>

    效果图:

    更多内容请参阅:CSS颜色值、CSS颜色

    hsl(0,  100%,50%)    /* red */   
    hsl(30, 100%,50%)                 
    hsl(60, 100%,50%)                
    hsl(90, 100%,50%)                
    hsl(120,100%,50%)    /* green */ 
    hsl(150,100%,50%)                
    hsl(180,100%,50%)                
    hsl(210,100%,50%)                
    hsl(240,100%,50%)    /* blue */  
    hsl(270,100%,50%)                
    hsl(300,100%,50%)                
    hsl(330,100%,50%)                
    hsl(360,100%,50%)    /* red */   
    
    hsl(120,100%,25%)    /* dark green */  
    hsl(120,100%,50%)    /* green */       
    hsl(120,100%,75%)    /* light green */ 
    
    hsl(120,100%,50%)    /* green */  
    hsl(120, 67%,50%)                 
    hsl(120, 33%,50%)                 
    hsl(120,  0%,50%)                 
    
    hsl(120, 60%,70%)    /* pastel green */ 
    

    上篇:rgba()

    下篇:text-fill-color