㈠HSL(H,S,L)

⑴通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色

⑵取值

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S：Saturation(饱和度)。取值为：0.0% - 100.0%

L：Lightness(亮度)。取值为：0.0% - 100.0%

⑶兼容性

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

⑷示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

        background-color:hsl(360, 50%, 50%);

        }

    </style>

</head>

<body>

    <div>hsl颜色值</div>

</body>

</html>

效果图：

㈡HSLA(H,S,L,A)

⑴此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度

⑵参数说明：

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S：Saturation(饱和度)。取值为：0.0% - 100.0%

L：Lightness(亮度)。取值为：0.0% - 100.0%

A：Alpha透明度。取值0~1之间。

⑶兼容性

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

⑷示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

        background-color:hsl(360, 50%, 50%,.5);

        }

    </style>

</head>

<body>

    <div>hsla颜色值</div>

</body>

</html>

效果图：

参考：https://www.html.cn/book/css/values/color/hsla.htm

CSS3—HSL与HSLA属性的更多相关文章

  1. CSS3:HSL和HSLA

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性（转）

    CSS2中色彩模式只有RGB色彩模式(RGB即RED.Green.BLue)和十六进制(Hex)模式,为了能支持 透明opacity 的Alpha值,CSS3又增加了RGBA色彩模式(RGBA即RED ...

  3. CSS3：不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  4. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

  5. CSS3 新增的文本属性

    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  6. css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  7. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  8. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  9. CSS3：布局display属性的flex（弹性布局）

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

随机推荐

  1. 【深入浅出-JVM】（1）：Java 虚拟机

    Java 虚拟机地位 种类 BEA的JRockit Solaris的Exact VM IBM的J9 感谢您的耐心阅读,如果您发现文章中有一些没表述清楚的,或者是不对的地方,请给我留言,您的鼓励是作者写 ...

  2. Java String类和StringBuffer类

    1.String类 用于字符串操作,本质是字符数组char[ ]. String对象的值是不可变的,即当你修改一个String对象的类容,JVM不会改变原来的对象,而是生成一个新String对象. 2 ...

  3. THUWC2020滚粗记

    \(Day-?\) 教练叫走了3个人,没叫我 感觉药丸,然后被告知pku没过,thu过了 神奇,然后就活了 后来在机房颓废,大声说笑被diss 当时感觉颓的有点过头,药丸 \(Day0\) 跟NC去T ...

  4. 移动站Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  5. std::list保存大量数据时，类型即是无析构函数，该list析构时会占用大量CPU

    std::list保存大量数据时,类型即是无析构函数,该list析构时会占用大量CPU

  6. app嵌套的vue项目更新后，页面没有更新

    记录下解决过程 1.index.html增加下面meta标签 <meta http-equiv="pragram" content="no-cache"& ...

  7. PHP敏感词替换

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  8. css 单位

    CSS 有几个不同的单位用于表示长度. 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等. 长度有一个数字和单位组成 ...

  9. java反射浅谈 part1--反射机制的定义，作用，原理

    一.定义 在运行过程中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:还可以通过反射创建对象,这种动态获取的信息以及动态调用对象的方法的功能称为 ...

  10. 用qpython3写一个发送短信的程序

    用qpython3写一个最简单的发送短信的程序 用qpython3写一个最简单的发送短信的程序到目前为止并没有多少手机应用是用python开发的,不过qpython可以作为一个不错的玩具推荐给大家来玩 ...