freeCodeCamp之CSS -2

免费学习编程的网站 freeCodeCamp(🔥) - 官方版（英文）

通过构建一组彩色标记来学习 CSS 颜色

使用色彩关键字

它表示一个具体的颜色值，且它不区分大小写。譬如这样 color:red 的 red 即是一个色彩关键字

哪些属性可以设置颜色

所有可以用到颜色值的地方，都可以用色彩关键字替代，那么在 CSS 中，什么地方可以用到颜色值呢？

  • 文本的颜色 color:red
  • 元素的背景色 background-color:red （包含各类渐变）
  • 元素的边框 border-color:red
  • 元素的盒阴影或文字阴影 box-shadow:0 0 0 1px red | text-shadow:5px 5px 5px red
  • 运用在一些滤镜当中 filter: drop-shadow(16px 16px 20px red)
  • <hr /> 水平线的颜色

使用RGB()

rgb() 表示颜色的红-绿-蓝（red-green-blue (RGB)）模式
image-1668575563382
在 #RRGGBB 中，RR 表示 红色的深浅，GG 表示绿色的深浅，BB 表示蓝色的深浅。取值都是从 00 - FF，值越大表示该颜色越深。

如果采用 rgb(RR,GG,BB) 的写法，RR 取值 0~255 或者百分比，255 相当于 100%，和十六进制符号里的 F 或 FF 。

了解了 rgb() 的含义的话，记住常用的颜色值其实是很容易的，像上面说的 RR 表示红色的深浅，那么#FF0000 就表示为红色，同理可以得到 #00FF00 表示绿色， #0000FF表示蓝色。

使用HSL颜色模型

HSL 颜色模型或色调、饱和度和亮度是表示颜色的另一种方式。
CSS hsl 函数接受 3 个值：0 到 360 的数字表示色调，0 到 100 的百分比表示饱和度，0 到 100 的百分比表示亮度。
如果你想象一个色轮，色调红色是 0 度，绿色是 120 度，蓝色是 240 度。
饱和度指纯色的颜色强度从 0% 或灰色到 100%。
亮度是颜色出现的亮度，从 0% 或全黑到 100% 或全白，其中 50% 为中性。

颜色过渡或渐变色

渐变是一种颜色过渡到另一种颜色。 CSS linear-gradient 函数可让你控制沿线的过渡方向以及使用的颜色。

要记住的一件事是 linear-gradient 函数实际上创建了一个 image 元素，并且通常与可以接受图像作为一个值的 background 属性配对。

linear-gradient 函数非常灵活

语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);

说明：
direction：默认为to bottom，即从上向下的渐变；
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

在不添加角度和方向的前提下，默认是从上到下
background: linear-gradient(color1, color2);

gradientDirection 是表明过渡的线的方向。 color1 和 color2 是颜色参数，它们是将在过渡本身中使用的颜色。 这些可以是任何类型的颜色，包括颜色关键字、十六进制、rgb 或 hsl。

linear-gradient 函数产生了平滑的红绿渐变。 虽然 linear-gradient 函数至少需要两个颜色参数才能工作，但它可以接受许多颜色参数。

参数color-stop

.red {
  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
}

规定渐变点的起始位置，以横坐标平分100%为算

gradientDirection 渐变方向举例

  1. background: linear-gradient(to left,#d3959b,#bfe6ba);
  • to left 设置渐变从右到左，相当于270deg。
  1. background: linear-gradient(to right,#d3959b,#bfe6ba);
  • to right设置渐变从左到右，相当于90deg。
  1. background: linear-gradient(to top,#d3959b,#bfe6ba);
  • to top 设置渐变从下到上，相当于0deg。
  1. background: linear-gradient(to bottom,#d3959b,#bfe6ba);
  • to bottom 设置渐变从上到下，相当于180deg。
  1. background: linear-gradient(to top right,#d3959b,#bfe6ba);
  • to right top = to top right ：从左下角到右上角，对角线角度。
  1. background: linear-gradient(45deg,#d3959b,#bfe6ba);
  • 和 to top right 有细微差别（背景为正方形的时候无差别） 。
  1. background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);
  • 用百分比指定起始颜色的位置，默认值为0%。
  1. background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);
  • 从左到右渐变，相当于90deg。

9. background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);

  • 相当于 to top right，从左下角到右上角对角线渐变。

渐变兼容性

.header {
    /* Safari */
    background: -webkit-linear-gradient(red, blue);

    /* Opera */
    background: -o-linear-gradient(red, blue);

    /* Firefox */
    background: -moz-linear-gradient(red, blue);

    /* 标准的语法, 放在最后 */
    background: linear-gradient(red, blue);
}

透明度

透明度描述事物的不透明性或不透明性。 例如，一堵实心墙是不透明的，没有光线可以通过。 但是水杯要透明得多，你可以透过玻璃看到另一边。

使用 CSS opacity 属性，你可以控制元素的不透明或透明程度。 使用值 0 或 0%，元素将完全透明，而在 1.0 或 100% 时，元素将像默认情况下一样完全不透明。

另外一种不透明的方式 alpha 通道-rgba 函数

rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。

  • 红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
  • 绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
  • 蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。
  • 透明度（A）取值 0~1 之间， 代表透明度。

添加阴影

box-shadow 属性允许你在元素周围应用一个或多个阴影。 这是基本语法：

box-shadow: offsetX offsetY blurRadius spreadRadius color;

如果不设置 blurRadius 的值，则默认为 0，并产生锐利的边缘。 blurRadius 的值越大，模糊效果就越大。
如果你想把阴影进一步扩大呢？ 你可以使用可选的 spreadRadius 值来做到这一点。
与 blurRadius 一样，spreadRadius 的值如果没有设置，则默认为 0。

  • h-shadow 必需的。水平阴影的位置。允许负值
  • v-shadow 必需的。垂直阴影的位置。允许负值
  • blur 可选。模糊距离
  • spread 可选。阴影的大小
  • color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

最终版