边框: 请参阅边框部分，了解可用于设置盒子边框颜色的 CSS 属性列表。
background-color: 在元素中没有前景内容的区域中使用的背景颜色。
box-shadow: 配置盒子上的内阴影和投影效果。每个阴影的选项中都包括阴影的基本颜色（然后根据其他参数将其模糊并与任何背景混合）。
column-rule-color: 使用CSS 多列布局时，用于绘制分隔文本列的线条的颜色。
outline-color: 用于绘制元素外部轮廓的颜色。此轮廓不同于边框，因为它不会在文档中为其预留空间。轮廓不参与盒子模型，与其他内容重叠。轮廓通常用作焦点指示器，指示哪个元素当前具有焦点并将接收键盘输入事件。

边框

任何元素都可以在其周围绘制边框。基本的元素边框是在元素内容边缘周围绘制的一条线。请参阅盒子模型，了解元素与其边框之间的关系，以及文章使用 CSS 样式化边框，以了解有关将样式应用于边框的更多信息。

您可以使用border 简写属性，该属性允许您一次配置边框的所有内容（包括边框的非颜色特征，例如其宽度、样式（实线、虚线等）等等）。

border-color 简写: 指定用于元素边框每一侧的单一颜色。
border-left-color、border-right-color、border-top-color 和 border-bottom-color: 允许您设置元素边框对应侧的颜色。
border-block-start-color 和 border-block-end-color: 使用这些属性，您可以设置用于绘制最靠近边框所包围的块的起始和结束位置的边框的颜色。在从左到右的书写模式下（例如英语的书写方式），块起始边框是顶部边缘，块结束边框是底部边缘。这与内联起始和结束不同，内联起始和结束是左右边缘（对应于盒子中每一行文本的开始和结束位置）。
border-inline-start-color 和 border-inline-end-color: 这些属性允许您为最靠近盒子内文本行开始和结束位置的边框边缘着色。这将是哪一侧取决于writing-mode、direction 和 text-orientation 属性，这些属性通常（但不总是）用于根据显示的语言调整文本方向。例如，如果盒子的文本是从右到左呈现的，则 border-inline-start-color 将应用于边框的右侧。

在样式表中将颜色指定为值

现在您已经了解了哪些CSS 属性允许您将颜色应用于元素，您可以开始向您的网站添加颜色了。让我们看一些在样式表中使用颜色的示例。在此示例中，我们使用了前面提到的几个属性，无论属性是什么，在 CSS 中应用颜色的概念都是相同的。

在继续查看创建它所需的代码之前，让我们先看看结果。

HTML

创建上述示例的 HTML 代码如下所示

html

<div class="wrapper">
  <div class="boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="boxRight">
    <p>This is the second box.</p>
  </div>
</div>

这里我们有一个包装器<div>，包含两个子 <div>，每个子 <div>都包含一个子段落（<p>）。每个内容 <div>都具有不同的外观和风格。

CSS

让我们逐一查看创建上述结果的 CSS 代码。

注意：在此示例中，我们使用了多种不同的 CSS 颜色值类型来演示其用法。这对于生产代码是不推荐的。编写 CSS 时，请使用您和您的团队认为最直观的类型。

css

.wrapper {
  height: 110px;
  padding: 10px;
  display: flex;
  gap: 10px;
  text-align: center;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  border: 6px solid mediumturquoise;
}

div {
  flex: 1;
}

.wrapper 类用于将样式分配给包含我们所有其他内容的<div>。这使用height建立容器的高度，允许此块级元素的宽度默认为其父元素的 100%。将display设置为 flex 并添加 10px 的gap 创建一个弹性容器，以便将子元素并排排列并在所有容器子元素之间留出间隙。我们使用flex 让弹性子元素增长以填充容器；它本身不会影响弹性容器。

这里我们更感兴趣的是使用border 属性来在元素的外边缘建立一个边框。此边框是一条实线，宽 6 像素，颜色为命名颜色 mediumturquoise。

在我们的包装器中，我们有一个左侧盒子和一个右侧盒子。

css

.boxLeft {
  background-color: rgb(245 130 130);
  outline: 2px solid darkred;
}

.boxLeft 类用于设置左侧盒子的样式，设置背景颜色和轮廓。

通过将 CSS background-color 属性的值更改为 rgb(245 130 130) 来设置盒子的背景颜色，使用rgb() 函数表示法。
为盒子定义了一个轮廓。与更常用的border不同，outline根本不影响布局；它绘制在元素盒子外部可能发生的事情的顶部，而不是像 border 那样腾出空间。此轮廓是一条实心的深红色线，厚度为 2 像素。请注意在指定颜色时使用 darkred 关键字。
请注意，我们没有显式设置文本颜色。这意味着color 的值将从定义它的最近的包含元素继承。默认情况下，为黑色。

css

.boxRight {
  background-color: hwb(270deg 63% 13%);
  outline: 4px dashed #6e1478;
  color: hsl(0deg 100% 100%);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #8f8;
  text-decoration: underline wavy #8f8;
  text-shadow: 2px 2px 3px black;
}

注意：我们分别包含了 text-decoration-* 样式，因为 Safari 不支持将text-decoration 作为简写属性。

最后，.boxRight 类在绘制到右侧的盒子上设置了多种样式。然后建立以下颜色（使用五种不同的方式声明颜色值）

background-color 使用hwb() 函数表示法设置 - hwb(270deg 63% 13%)。这是一种中等紫色的颜色。
盒子的 outline 用于指定盒子应封闭在一个 4 像素厚的虚线中，其颜色为略深的紫色，使用六位数的<hex-color> #6e1478。
前景（文本）颜色通过使用hsl() 函数表示法设置color 属性来指定 - hsl(0deg 100% 100%)。这是指定白色颜色的众多方法之一。
我们使用text-decoration 简写以及详细组件来实现浏览器兼容性，在文本下方添加了一条绿色的波浪线。我们使用了 3 位数的<hex-color> #8f8，它等效于 #88ff88。
最后，使用text-shadow 为文本添加了一些阴影。其 color 参数设置为 black，这是一个<named-color> 值。

我们使用了五种不同的颜色语法来演示可能的情况。在现实世界中，您和您的团队最好选择一个首选的颜色表示法，让每个人在使用相同颜色语法的代码库上工作。

其他使用颜色的方法

CSS 不是唯一支持颜色的 Web 技术。其他示例包括

HTML 画布 API: 允许您在<canvas> 元素中绘制 2D 位图图形。请参阅我们的画布教程以了解更多信息。
SVG（可缩放矢量图形）: 允许您使用绘制特定形状、图案和线条的命令创建图像。SVG 命令格式化为 XML，可以直接嵌入到网页中或使用<img> 元素放置在页面中，就像任何其他类型的图像一样。
WebGL: Web 图形库是一个基于 OpenGL ES 的 API，用于在 Web 上绘制高性能的 2D 和 3D 图形。请参阅我们的WebGL 教程以了解更多信息。另请参阅WebGPU，它是针对现代 GPU 的 WebGL 的后续产品。

注意：一些现在已弃用的 HTML 属性接受颜色作为值，例如 bgcolor 和 vlink。这些属性仅接受<named-color> 和三位数或六位数的<hex-color> 值。