该篇文章为 freecodecamp Learn css colors by building a set of colored markers 学习笔记

查看效果：colored-markers

color models

  • RGB：电子设备中使用的颜色模型，由红绿蓝三个颜色组成，每个颜色由0-255的整数表示，0表示黑色，255表示白色。
  • CMYK: 印刷设备中使用的颜色模型，对应（青色、品红色、黄色、黑色）
1
2
3
.red {
  background-color: rgb(255, 0, 0);
}

hexadecimal

RBG 的另一种形式。

十六进制颜色值以 # 字符开头，采用 0-9 和 A-F 的六个字符。第一对字符代表红色，第二对代表绿色，第三对代表蓝色。例如，#FF0000 表示红色，#00FF00 表示绿色，#0000FF 表示蓝色。

1
2
3
.green {
  background-color: #007F00;
}

HSL

HSL 颜色模型由三个属性组成：色调（hue），饱和度（saturation），亮度（lightness）。

CSS hsl 函数接受3 个值，色调为 0360之间的数字，饱和度为 0100 之间的百分比，亮度为 0~100 之间的百分比。

  • 色调：红色的色调为 0，绿色的色调为 120，蓝色的色调为 240。
  • 饱和度：颜色的纯度，从 0% 灰色 到 100% 纯色，必须要添加百分号%。
  • 亮度：颜色显示的明亮程度，从 0% 全黑 到 100% 全白，其中 50% 为中性。
1
2
3
.blue {
  background-color: hsl(240, 100%, 50%);
}

过渡或者渐变

使用 linear-gradient 渐变函数，它实际上创建一个图像元素，通常与 background 属性使用。

1
2
3
.red {
  background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0));
}

颜色停止，允许微调颜色沿渐变线的放置位置，它们是线性渐变函数中颜色后面的长度单位，例如 px 或 百分比。

1
linear-gradient(90deg, red 90%, black);

透明度两种方式

  • opacity 属性：0~1之间的数字，0 表示完全透明，1 表示完全不透明。
  • rgba()：rgba() 函数的第四个参数是透明度，取值范围 0~1。
1
background-color: rgba(255, 255, 255, 0.5);

border

1
2
border-left: width style color;
border-left: 10px solid black;

上面的等价于：

1
2
3
border-left-width: 10px;
border-left-style: solid;
border-left-color: black;

阴影

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

1
2
3
4
5
6
7
8
box-shadow: offsetX offsetY color;
box-shadow: offsetX offsetY blurRadius color;
box-shadow: offsetX offsetY blurRadius spreadRadius color;

eg:
box-shadow: 5px 5px red;
box-shadow: 5px 5px 5px red;
box-shadow: 5px 5px 5px 5px red;
  • spreadRadius：阴影的扩展量，默认值为 0。
  • blurRadius：阴影的模糊量，默认值为 0。
  • offsetX：阴影的水平偏移量，默认值为 0。
  • offsetY：阴影的垂直偏移量，默认值为 0。
  • color：阴影的颜色。