欢迎来到站长教程网!
兔子CDN

DIV&CSS

当前位置:主页 > 网页制作 > DIV&CSS >

CSS3中HSL和HSLA的简单使用示例

时间:2020-10-18|栏目:DIV&CSS|点击:

2015714174115348.gif (196×129)

使用CSS3 HSL声明同样是用来设置颜色的。下一个呢? HSLA? 是的,这个和RGBA的效果是一样的。

HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。

    Hue衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。
    Saturation值是一个百分比:0%是灰度,100%饱和度最高
    Lightness值也是一个百分比:0%是最暗,50%均值,100%最亮。

随想:为什么是”ligntness”呢?或许我更习惯Photoshop中的”Brightness”呢……

浏览器兼容性:

目前HSL和HSLA被Firefox、Google Chrome、和Safari浏览器较好的支持,而且不需要任何前缀
CSS3 HSL
2015714174142629.jpg (600×120)

上面的演示由以下样式实现

CSS Code复制内容到剪贴板
  1. div.hslL1 { background:hsl(320, 100%, 50%); height:20px; }     
  2. div.hslL2 { background:hsl(320, 50%, 50%); height:20px; }     
  3. div.hslL3 { background:hsl(320, 100%, 75%); height:20px; }     
  4. div.hslL4 { background:hsl(202, 100%, 50%); height:20px; }     
  5. div.hslL5 { background:hsl(202, 50%, 50%); height:20px; }     
  6. div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }   

CSS3 HSLA
2015714174204693.jpg (600×100)

上面的效果由以下样式实现:

CSS Code复制内容到剪贴板
  1. div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }     
  2. div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }     
  3. div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }     
  4. div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }     
  5. div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }    

上一篇:详解CSS中@supports的用法

栏    目:DIV&CSS

下一篇:CSS中使用table-cell法来达到居中效果

本文标题:CSS3中HSL和HSLA的简单使用示例

本文地址:www.dtcnnet.com/CSS/43299.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:584415406 | 邮箱:584415406#qq.com(#换成@)

Copyright © 2015-2020 小白站长网 版权所有 苏ICP备20040415号