色彩模式
色彩关键词
色彩关键词
colorname → 预定义色彩名称
① 17中标准色+130种浏览器预定义色
② 实际应用少
③ 兼容性好
特殊关键词
transparent → 指定全透明色彩
① background默认值
② CSS3可以应用于所有带颜色的属性实例：绘制各种小箭头
定义一个div元素
添加边框
设置div元素的宽高均为0，出现四个三角形
border-color设置某边边框颜色，得到一个以该边为底的三角形
background默认值为透明
也可以和相邻三角形组合成一个大三角形
而给div设置宽高之后又会产生梯形等形状
再配合圆角属性甚至可以出现扇形
currentcolor → 沿用当前 color 色彩
可以看作一个变量，能接受color值定义的地方都可以使用（e.g.比如背景色、边框色、阴影色）
因为color属性本身具有可继承性，因此currentcolor级可以作为元素本身，也可以作为元素的后代作用
精简代码，优化组织与维护
（设定一个color值，与其相关颜色的元素全部设置为currentcolor，就可以控制所有关联元素的色彩）
应用
结合伪对象，结合渐变，结合动画，结合SVG
实例 currentcolor的优化应用
十六进制
#RRGGBB #RGB
① 屏幕通过红绿蓝三种光源组合显示
② 所有值都介于00和FF之间，00最黑，FF最亮
③ 同一通道两个值相同可以简写#RRGGBB → #RGB
④ 兼容性好
RGB
rgb(red,green,blue)
① 三个参数定义三个通道色彩亮度
② 亮度值介于0~255，也可以用百分比表示
③ 兼容性好
RGBA<CSS3>
rgba(red,green,blue,alpha)
RGB模式的扩展，增加了alpha通道
alpha参数的值介于0.0（完全透明）~1.0之间（完全不透明）
HLS<CSS3>
hls(色相，饱和度，明度)
色相：色彩相貌，用角度描述
饱和度：色彩纯度，用百分数描述，100%满饱和度，0%黑度
明度：色彩亮度，用百分数描述，100%白色，0%黑色
div{
background-color:hls(240,100%,50%)
}
<!--正蓝色-->
适合配色方案或者色彩变化的CSS3动画
目前应用较少
ps中的HLB和HSL是不同的，HSL取色不方便
用HLS要对H、S、L三种颜色有一定了解，要有一定的色彩理论基础
HLSA <CSS3>
hls(色相，饱和度，亮度，alpha)
增加了alpha透明通道
获取色彩
在线色彩模式转换（可以用脚本之家的工具大全）
浏览器开发工具（按住shift键，点击代码，可以改变色彩的其它表达形式）
半透明的解决方案
- CSS3
rgba和hlsa中的alpha通道 - CSS
opacity属性
定义一个元素的透明级别，值介于0.0~0.1之间
rgba()和opacity的区别
① rgba()是属性的值，opacity是一个属性
② rgba()作用于使用该值的当前属性，opacity作用于使用该属性的元素
③ rgba()作用于元素本身的当前属性，不影响其他；opacity作用于当前元素及其子元素
- IE浏览器alpha滤镜
(可以用来做兼容处理)
RGBA + filter滤镜
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=#AARRGGBB)
opacity + filter滤镜
filter:Alpha(opacity=50)
实例：图文模块背景半透明展示
Q：图片作为背景图插入还是用img标签插入
A：img，因为图文模块本质上还是内容，而不是装饰元素。
收获
除了系统的总结了颜色的设置方式之外，我觉得看小姐姐写代码也让我很有收获。
之前在做登陆腾讯云页面的时候输入框提示字不是紧挨边框写的，我通过插入空格使其样式达到了预期效果，看了如水迷小姐姐处理这种问题，我才知道这应该通过设置边框宽度来实现。
如果喜欢看视频可以在腾讯课堂找如水迷小姐姐的课，声音超温柔。
网友评论