CSS3中各种颜色属性的使用教程

 <div class="hsl2">hsl(240, 80%, 50%)</div>  
 <div class="hsl3">hsl(30, 100%, 50%)</div>  
 <div class="hsla1">hsla(0, 100%, 0%, 0.8)</div>  
 <div class="hsla2">hsla(210, 100%, 50%, 0.8)</div>  
    
 <div id="log"></div>  
</body>  

来看看 CSS 的用法：

CSS Code复制内容到剪贴板

div {   
 width: 220px;   
 height: 50px;   
 float: left;   
 margin-right: 10px;   
 line-height: 50px;   
 text-align: center;   
 border: 1px solid #000;   
}   
.hsl1 {   
 color: hsl(0, 100%, 100%);   
 background-color: hsl(0, 100%, 50%);   
}   
.hsl2 {   
 color: hsl(0, 100%, 100%);   
 background-color: hsl(240, 50%, 50%);   
}   
.hsl3 {   
 background-color: hsl(30, 100%, 50%);   
}   
.hsla1 {   
 color: hsl(0, 100%, 100%);   
 background-color: hsla(0, 100%, 0%, 0.8);   
}   
.hsla2 {   
 background-color: hsla(210, 100%, 50%, 0.8);   
}  

基本上的用法就跟 rgb() 及 rgba() 一样。但有趣的是，当笔者尝试使用 jQuery 取出颜色值时，原本用 hsl() 或 hsdl() 来设定的都会是转换成 rgb() 及 rgba() 后的值。

JavaScript Code复制内容到剪贴板

$(function(){   
 var str = ”;   
 $(‘div:not(#log)’).each(function(){   
  var $this = $(this);   
  str += ‘.’ + $this.attr(‘class’) + ‘ : ‘ + $this.css(‘background-color’) + ‘<br />’;   
 });   
 $(‘#log’).html(str);   
});