CSS颜色

基于freecodecamp和菜鸟教程学习总结

classes

多个classes可以以空格分隔放在class属性内来一起设置给一个元素

颜色模型

• 叠加RGB（红、绿、蓝）模型：用于电子设备，颜色从黑色开始，色值随着红色、绿色和蓝色数值变化而变化，用CSS的rgb函数，每个红色、绿色、蓝色值都是一个从0到255的数字。0表示该颜色的0%，并且是黑色。255意味着该颜色的100%
• 消减CMYK（青色、品红色、黄色、黑色）模型：用于打印

原色

组合后成为纯白色的颜色。但要做到这一点，每种颜色都需要处于最高强度

• 红色：rgb(255,0,0)
• 绿色：rgb(0,255,0)
• 蓝色：rgb(0,0,255)

间色

组合原色得到的颜色

• 黄色：rgb(255,255,0)，纯红色和纯绿色的组合
• 青色：rgb(0,255,255)，纯绿色和纯蓝色的组合
• 品红色：rgb(255,0,255)，纯红色和纯蓝色的组合

复色

通过组合一种原色和一种邻近的间色来创建

• 橙色：rgb(255,127,0)，增加红色的强度，降低绿色的强度
• 亮绿色：rgb(0,255,127)
• 蓝紫色：rgb(127,0,255)
• 黄绿色：rgb(127,255,0)
• 天蓝色：rgb(0,127,255)
• 亮粉红色：rgb(255,0,127)

色轮

色轮是一个圆圈，其中相似的颜色或色调彼此靠近，而不同的颜色相距较远。色轮上位置成180°角的两种颜色称为补色，如果将两种补色组合在一起它们会产生灰色。但当它们并排放置时，这些颜色会产生强烈的对比，显得更亮

十六进制颜色码

RGB的另一种形式，以#字符开头，从0-9和A-F取六个字符。每两个字符一对，第一对字符代表红色，第二对代表绿色，第三对代表蓝色。对于十六进制颜色，00是该颜色的0%，FF是该颜色的100%

HSL颜色模型

HSL即色调、饱和度、亮度，是表示颜色的另一种方式，CSS的hsl函数接受三个值

• 色调（H）：是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等，取0-360的数字
• 饱和度（S）：指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值
• 亮度：取0-100%的数值

渐变色

一种颜色过渡到另一种颜色，CSS的linear-gradient函数可让你控制沿线的过渡方向以及使用的颜色，并通常与可以接受图像作为值的background属性值配对

linear-gradient(gradientDirection,color1,color2,...)

• gradientDirection：表明过渡的线的方向，该参数可以省略，此时默认会从上到下即沿180度线排列颜色
• color1、color2：过渡中使用的颜色，可以是任何类型，包括颜色关键字、rgb、hsl或十六进制
• 颜色中间点：颜色渐变的位置，以像素或百分比为单位，若未设置该参数，默认情况下沿线均匀分布颜色

.red {
  background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
}

效果如下：

透明度

使用CSS的opacity属性来控制元素的透明度，数值为0或0%为完全透明，数值为1.0或100%为完全不透明。还可以使用alpha通道控制颜色的透明度，用rgba函数，取0-1.0的数字

rgba(redValue,greenValue,blueValue,alphaValue);

边框

所有HTML元素都有边框，通常默认设置为none。使用CSS可以控制边框的所有方面，并在所有边上设置边框，或者一次只设置一侧。要使边框可见，需要设置其宽度和样式

• border-left：简写属性，允许同时设置左边框的宽度、样式和颜色，borer-left: (width style color)
• border-left-width：该属性设置左边框的宽度
• border-left-color：该属性设置左边框的颜色
• border-left-style：该属性设置左边框的样式
• border-bottom-left-radius：该属性设置左下角边框的形状

box-shadow

该属性允许在元素周围应用一个或多个阴影

box-shadow: offsetX offsetY blurRadius spreadRadius  color;

• offsetX：必需，水平阴影的位置，允许负值
• offsetY：必需，垂直阴影的位置，允许负值
• blurRadus：可选，模糊距离，若不选默认值为0，会产生锐利的边缘。值越大，模糊效果越强
• spreadRadius：可选，阴影的大小
• color：可选，阴影的颜色