CSS3实例教程(10):CSS3 HSL申明设定色调

2021-01-20 16:23 jianzhan

应用CSS3 HSL申明一样是用来设定色调的。下1个呢? HSLA? 是的,这个和RGBA的实际效果是1样的。
应用CSS3 HSL申明一样是用来设定色调的。下1个呢? HSLA? 是的,这个和RGBA的实际效果是1样的。
上1篇文章内容:CSS3实例教程(9):设定RGB色调
HSL申明应用色彩Hue(H)、饱和状态度Saturation(s)和亮度Lightness(L)来设定色调。
Hue衍生于色盘:0和360是鲜红色,贴近120的是翠绿色,240是蓝色。
Saturation值是1个百分比:0%是灰度值,100%饱和状态度最高
Lightness值也是1个百分比:0%是最暗,50%平均值,100%最亮。
随想:为何是”ligntness”呢?也许我更习惯性Photoshop中的”Brightness”呢……
访问器适配性:
现阶段HSL和HSLA被Firefox、Google Chrome、和Safari访问器较好的适用,并且不必须任何前缀 CSS3 HSL

上面的演试由下列款式完成
div.hslL1 { background:hsl(320, 100%, 50%); height:20px; } div.hslL2 { background:hsl(320, 50%, 50%); height:20px; } div.hslL3 { background:hsl(320, 100%, 75%); height:20px; } div.hslL4 { background:hsl(202, 100%, 50%); height:20px; } div.hslL5 { background:hsl(202, 50%, 50%); height:20px; } div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }
访问器适用:
  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8 RC1 )
  • Opera(9.6 …)
  • Safari(3.2.1 windows…) CSS3 HSLA

    上面的实际效果由下列款式完成:
    div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; } div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; } div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; } div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; } div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }
    访问器适用:
    • Firefox(3.05 …)
    • Google Chrome(1.0.154 …)
    • Google Chrome(2.0.156 …)
    • Internet Explorer(IE7, IE8 RC1 )
    • Opera(9.6 …)
    • Safari(3.2.1 windows…)