好装的标题啊哈哈哈哈哈哈
最近get了一个学习前端的网站叫FreeCodeCamp
原色:rgb三个值的其中一个值拉满,比如说rgb(255,0,0)是红色这样,三个主色:
- 红色 rgb(255, 0, 0) #FF0000
- 绿色 rgb(0, 255, 0) #00FF00
- 蓝色 rgb(0, 0, 255) #0000FF
间色(Secondary color):rgb三个值中的其中两个值拉满,即两个原色组合起来,分别有:
- 黄色(yellow) rgb(255, 255, 0)
- 青色(cyan) rgb(0, 255, 255)
- 品红色(magenta) rgb(255, 0, 255)
复色:一种原色和一种临近的颜色组合起来,如:
- 橙色 rgb(255,127,0) 红多绿少
色轮上相互对立的两种颜色称为补色。如果将两种互补色组合在一起,它们会产生灰色。 但当它们并排放置时,这些颜色会产生强烈的视觉对比,显得更亮。
HSL颜色模型
用色调、饱和度和亮度来表示颜色
css中hsl函数接收3个值:0-360的数字表示色调,0-100的百分比表示饱和度,0-100的百分比表示亮度,例如:
background-color: hsl(240, 100%, 50%); // 纯蓝色
等同于
background-color: rgb(0,0,255);
background-color: #0000FF;
其中色调可以想象成一个色轮,色轮红色是0度,绿色是120度,蓝色是240度
饱和度是指纯色的颜色强度
亮度是指颜色出现的亮度,从0%全黑到100%全白,其中50%是中性
渐变
渐变是一种颜色过渡到另一种颜色。在CSS中linear-gradient
函数用来控制沿线的过渡方向和使用的颜色
linear-gradient
函数实际上创建了一个image原色,通常可以接受图像作为一个值的background
属性配对
linear-gradient(gradientDirection, color1, color2, ...);
其中gradientDirection
表示过渡的线的方向,单位是deg,表示角度的意思,如0deg就是竖着从下到上过渡,第一个颜色在下,第二个颜色在上,…。就像一个钟表的指针,从圆心指向12点是0度,从圆心到指针的方向,180度就是6点钟方向,从上到下过渡;270度为9点钟方向,从右到左过渡。
如果没有给gradientDirection
参数,则默认沿着180deg从上至下排列颜色
color1/2
这些是颜色参数,这些颜色可以是任何类型的,包括颜色关键字、十六进制、rgb或hsl
比如下面是从左到右的红绿渐变:
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0,255,0));
再比如从右到左的红橙黄渐变:
background: linear-gradient(270deg, red, orange, yellow);
颜色中间点(color-stop)允许微调颜色沿渐变线的位置,不加单位默认是px,也可以写成百分比的形式。不写颜色中间点时,默认沿渐变线均匀分布颜色
例如红黑渐变:
background: linear-gradient(90deg, red 20%, black);
红色部分只占20%,黑色占大部分
透明度
透明度描述事物的不透明性
可以使用CSS中的opacity
属性来控制元素的透明度,值为0-1或者0%-100%。值为0或0%,元素则完全透明;值为1或100%,元素则完全不透明,也是默认情况。
另一种控制元素透明度的方法是使用alpha通道,在0-1之间取一个数作为alpha通道:
rgba(redValue, greenValue, blueValue, alphaValue);
rgba(0, 0, 0, .5); // 小数点前面的0可以省略
#000000CC
hsla(120, 100%, 50%, .8)