CSS3—HSL与HSLA属性
㈠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属性的更多相关文章
- CSS3:HSL和HSLA
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性（转）
CSS2中色彩模式只有RGB色彩模式(RGB即RED.Green.BLue)和十六进制(Hex)模式,为了能支持 透明opacity 的Alpha值,CSS3又增加了RGBA色彩模式(RGBA即RED ...
- CSS3：不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
- CSS3 新增的文本属性
一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
- 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 ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
随机推荐
- ARST第二周打卡
Algorithm : 做一个 leetcode 的算法题 题目:一个无序数组里有99个不重复正整数,范围从1到100,唯独缺少一个整数.如何找出这个缺失的整数? int FindOneMissNum ...
- Docker——入门
虚拟化最大区别:虚拟化技术元件,资源申请调度到其他硬件服务器: Docker是一个开源得应用容器引擎,让开发者可以打包他们得应用以及依赖包到一共可移植得容器中,然后发布到任何流行得linux机器上,也 ...
- Codeforces 1237E. Balanced Binary Search Trees
传送门 这一题是真的坑人,时间空间都在鼓励你用 $NTT$ 优化 $dp$...(但是我并不会 $NTT$) 看到题目然后考虑树形 $dp$ ,设 $f[i][0/1]$ 表示 $i$ 个节点的树,根 ...
- C#键盘事件
一: protected override void OnKeyDown(KeyEventArgs e) { if (e.Key==Key.Enter) { sendAppToServer(); } ...
- SNI功能在NetScaler上的实现
SNI功能在NetScaler上的实现 来源 https://raynorli.com/2018/09/11/sni-on-netscaler/ 现网中经常是一台主机上运行多个Web站点,如果启用了 ...
- O050、Create Volume 操作 （Part I）
参考https://www.cnblogs.com/CloudMan6/p/5603312.html 前面已经学习了Cinder的架构和相关组件,从本节开始详细分析 Cinder 的各种操作,首先 ...
- 初识python之了解其背景和安装
1.Python的发展 Python语言诞生于1990年,由Guido van Rossum设计并领导开发.1989年12月,Guido考虑启动一个开发项目以打发圣诞节前后的时间,所以决定为当时正在构 ...
- 如何将webstrom本地的代码上传到github上
首先注册一个github账户,然后下载一个git软件. 文件夹的任意处点击右键,找到gitbash here,打开终端命令窗口. 因为我们本地 Git 仓库和 GitHub 仓库之间的传输是通过 S ...
- Spring整合Hessian的使用
该文章转赞自 https://www.cnblogs.com/ontheroad_lee/p/3797239.htm 个人感觉写的非常好,刚学习,先记录下来 1.1 Hessian简介 He ...
- 【转】ESXi主机出现“主机上的系统日志存储在非持久存储器中”解决办法
原址:https://blog.csdn.net/mooncarp/article/details/50923483 当ESXi主机的底层操作系统安装在SD卡上时,在vCenter中配置该主机时,如果 ...