【CSS颜色】

青青草原风

已于 2024-03-13 21:28:02 修改

阅读量928

点赞数 22

文章标签： html 前端 javascript

于 2024-03-13 21:26:46 首次发布

本文链接：https://blog.csdn.net/qq_50563459/article/details/136692080

版权

本文章属于学习笔记，在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>