请使用firefox,chrome等最新浏览器浏览本站。

CSS3 HSL 和HSLA

css3 阿豹 507次浏览 1个评论 扫描二维码

使用CSS3 HSL声明同样是用来设置颜色的.这个和RGBA的效果是一样的。
查看兼容性

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

Hue衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。

Saturation值是一个百分比:0%是灰度,100%饱和度最高

Lightness值也是一个百分比:0%是最暗,50%均值,100%最亮。
示例:

div{ 
    background:hsl(165, 35%, 50%);
}
div{ 
    background:hsla(165, 35%, 50%, 0.2);
}
div{ 
    color:hsla(165, 35%, 50%, 0.2);
}
div{ 
    border:1px solid hsla(165, 35%, 50%, 0.2);
}

转载请注明CSS3 HSL 和HSLA
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(1)个小伙伴在吐槽
  1. This is way more helpful than anthiyng else I've looked at.
    匿名2017-03-11 21:04 回复