本文章属于学习笔记，在https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/中练习
三、CSS颜色
1、有两种主要的颜色模型:电子设备中使用的加性RGB(红、绿、蓝)模型和印刷品中使用的减色CMYK(青色、品红、黄色、黑色)模型。
使用RGB模型。这意味着颜色从黑色开始，随着不同层次的红、绿、蓝的引入而变化。一个简单的方法就是使用CSS rgb函数。
黑色rgb(0, 0, 0)
红色rgb(255,0,0)
绿色rgb(0,255,0)
蓝色0，0，255
白色255，255，255
黄色255，255，0
蓝绿色cyan 0，255，255
紫色255，0，255
橙色255，127，0
2、一个非常常见的方式来应用颜色的CSS元素是十六进制或十六进制值。虽然十六进制值听起来很复杂，但它们实际上只是RGB值的另一种形式。
十六进制颜色值以#字符开头，从0-9和a - f中选取6个字符。第一对字符代表红色，第二对代表绿色，第三对代表蓝色。例如,# 4 b5320
十六进制，或以16为基数的值，从0-9开始，然后是A-F:1, 2,3,4, 5, 6, 7, 8, 9, A,B,C,D,E,F
对于十六进制颜色，00是该颜色的0%，FF是100%。所以#00FF00转换成0%红，100%绿，0%蓝，和rgb(0,255,0)是一样的
3、HSL颜色模型，或色调、饱和度和明度，是另一种表示颜色的方式。
CSS hsl函数接受3个值:色调从0到360的数字，饱和度从0到100的百分比，以及亮度从0到100的百分比。
如果想象一个色轮，色调红色为0度，绿色为120度，蓝色为240度。
饱和度是一种颜色的强度，从0%，或灰色，到100%的纯色。你必须在饱和度和亮度值上加上百分号%。
明度是指一种颜色出现的亮度，从0%(即完全黑色)到100%(即完全白色)，其中50%为中性。
蓝色：hsl(240,100%,50%)
4、可以在元素上使用颜色过渡或渐变
渐变是指一种颜色过渡到另一种颜色。CSS线性渐变函数允许您控制沿直线过渡的方向，以及使用哪些颜色。
线性梯度函数实际上创建了一个图像元素，并且通常与可以接受图像作为值的背景属性配对。
线性梯度函数非常灵活——以下是你在本教程中使用的基本语法:
linear-gradient(gradientDinection, color1, color2，…)
gradientDinection梯度方向是用于过渡的线的方向。color1和color2是颜色参数，它们是将在过渡本身中使用的颜色。这些可以是任何类型的颜色，包括颜色关键字，十六进制，rgb或hsl。
5、颜色停止允许你微调颜色沿着渐变线的位置。它们是像px或百分比这样的长度单位，在线性梯度函数中跟随颜色。
例如，在这个红黑梯度中，从红色到黑色的过渡发生在梯度线上的90%点，所以红色占据了大部分可用空间:linear-gradient(90deg，red90%，black);
不透明度描述了某物的不透明或不透明程度。例如，固体墙是不透明的，没有光线可以通过。但饮水杯的透明度要高得多，你可以透过玻璃看到另一边。
使用CSS不透明度属性，您可以控制元素的不透明或透明程度。当值为0或0%时，元素将完全透明，当值为1.0或100%时，元素将完全不透明，就像默认情况一样。
opacity:0.5;透明度
6、另一种设置元素不透明度的方法是使用alpha通道。与不透明度属性类似，alpha通道控制颜色的透明或不透明程度。
你已经用命名颜色和不透明度属性设置了袖的不透明度，但是你可以在其他CSS颜色属性中添加alpha通道。
7、为rgb颜色添加alpha通道，请使用rgba函数代替：
rgba函数的工作原理和rgb函数一样，但是对于alpha通道要多取一个从到1.0的数字:rgba（redValue， greenValue， blueValue， alphaValue）;
您还可以使用hsl和十六进制颜色的alpha通道。
8、边框有几种样式可供选择。你可以让你的边界是实线，但你也可以使用虚线或虚线，如果你喜欢。实线边框可能是最常见的。border-left-style:solid[double];
边框现在应该是可见的。如果没有设置颜色，则默认使用黑色。为了让你的代码更易读，最好明确设置边框颜色。
9、border-left速记属性可以让你同时设置左边框的宽度、样式和颜色。
语法：border-left: width style color;
10、box-shadow属性允许你在一个元素周围应用一个或多个阴影。下面是基本语法:
box-shadow: offsetX offsetY;
下面是offsetX和offsetY值的工作原理:
1、offsetx和offsetY都接受px和其他CSS单位的数值
2、一个正的off setX值将阴影向右移动，一个负值将阴影向左移动
3、正offsetY值使阴影向下移动，负值使阴影向上移动
4、如果你想让offset和offset的值为0，你不需要添加一个单位。每个浏览器都明白，零表示没有变化
阴影的高度和宽度由它所应用的元素的高度和宽度决定。你也可以使用一个可选的spreadRadius值来扩展阴影的范围。
11、注意阴影的边缘是锐利的。这是因为box-shadow属性有一个可选的blurRadius值:box-shadow: offsetx offisety blumradius color;
如果不包含blurRadius值，则默认值为e，并产生尖锐的边缘。blurRad tus值越高，模糊效果越好。
想进一步扩大阴影可以使用可选的spreadRadius值:box-shadow: offsetX offsetY blurRadius spreadRadius color;
与blurRadius一样，如果不包含spreadRadius，则默认为0。
styles.css
h1 {
text-align: center;
}
.container {
background-color: rgb(255, 255, 255);
padding: 10px 0;
}
.marker {
width: 200px;
height: 25px;
margin: 10px auto;
}
.cap {
width: 60px;
height: 25px;
}
.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255, 255, 255, 0.5);
border-left: 10px double rgba(0, 0, 0, 0.75);
}
.cap, .sleeve {
display: inline-block;
}
.red {
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}
.green {
background: linear-gradient(#55680D, #71F53E, #116C31);
box-shadow: 0 0 20px 0 #3B7E20CC;
}
.blue {
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
box-shadow: 0 0 20px 0 blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colored Markers</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>CSS Color Markers</h1>
<div class="container">
<div class="marker red">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
<div class="marker green">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
<div class="marker blue">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
</div>
</body>
</html>
