css3新增色调表明方法共享

2021-03-08 00:45 jianzhan

1、CSS1&2色调表明方法(W3C规范)

1、Color name  色调名字方法(用色调重要字表明对应的色调。)
比如:red(鲜红色)、blue(蓝色)、pink(粉色)
优势:便捷便捷并且特殊色调较为精确
缺陷:
表明色调数量比较有限。
不适用全透明色调.
 
2、HEX方法 106进制方法(应用106进制表明色调)
英语的语法:#RRGGBB 或 #RGB
赋值:
RR: 鲜红色值。106进制正整数金额
GG: 翠绿色值。106进制正整数金额
BB: 蓝色值。106进制正整数金额
赋值范畴:00-FF
比如:#FF0000鲜红色 #FFFF00 黄色。
优势:表明色调类型多,应用较便捷
缺陷:
16进制企业换算很成难题
不适用全透明色调。
特殊色调必须专用工具相互配合或1定的色调配制专业知识
 
 
3、RGB方法 3原色配色方法
英语的语法:RGB(R,G,B)
赋值:
R: 鲜红色值。正整数金额 | 百分数
G: 翠绿色值。正整数金额 | 百分数
B: 蓝色值。正整数金额 | 百分数
赋值范畴:0~255或0%~100%
比如:rgb(255,0,0)鲜红色 rgb(255,255,0)黄色
优势:表明色调类型多,应用较便捷
缺陷:
不适用全透明色调
特殊色调必须专用工具相互配合或1定的色调配制专业知识
 
2、CSS3 新增色调表明方法
1、RGBA方式
此颜色方式与RGB同样,只是在RGB方式上新增了Alpha全透明度。
英语的语法:RGBA(R,G,B,A)
赋值:
R: 鲜红色值。正整数金额 | 百分数
G: 翠绿色值。正整数金额 | 百分数
B: 蓝色值。正整数金额 | 百分数
A: Alpha全透明度。赋值0~1之间。
比如:rgba(255,0,0,0.5)半全透明鲜红色

<style type="text/css">
body{background:rgba(255,0,0,1)}
div{width:300px;
height:300px;
background:rgba(0,0,255,0.4);
position:absolute;
top:0;
left:0;
}
</style>
<body>
猜猜我在哪儿里
<div></div>
</body>

2、HSL方式(色轮方式)
英语的语法:HSL(H,S,L)
赋值:
H: Hue(色彩)。–0(或360)表明鲜红色,120表明翠绿色,240表明蓝色,也可取别的标值来特定色调。赋值为:0 - 360
S: Saturation(饱和状态度)。赋值为:0.0% - 100.0%
L: Lightness(亮度)。赋值为:0.0% - 100.0%
比如:hsl(360,50%,50%) 鲜红色


拷贝编码
编码以下:

<style type="text/css">
body{background:rgba(0,0,255,0.5);}
div{width:300px;
height:300px;
background:hsl(140,50%,50%);
position:absolute;
top:0;
left:0;
}
</style>
<body>
<div></div>
</body>

3、HSLA方式