首页 > 开发 > CSS > 正文

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

2024-07-11 08:55:17
字体:
来源:转载
供稿:网友

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复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表