背景和边框

在本课程中，我们将了解如何利用 CSS 背景和边框实现一些创意效果。从添加渐变、背景图像到圆角，背景和边框能够解决 CSS 中许多样式问题。

预备知识	HTML 基础（学习 HTML 基础语法）、CSS 值和单位、CSS 尺寸设置。
学习成果	基本背景样式 — 颜色和图像。背景图像尺寸、重复、位置和附件。背景渐变 — 一般概念和线性渐变（径向渐变、锥形渐变和重复渐变更高级；在此阶段无需深入了解。）背景的无障碍性考量 — 确保良好的对比度。边框基础 — 宽度、样式、颜色和边框简写。圆角边框半径。

背景颜色

background-color 属性定义了 CSS 中任何元素的背景颜色。该属性接受任何有效的 <color> 值。background-color 延伸到元素的内容和内边距框之下。

在下面的示例中，我们使用了各种颜色值来为盒子、标题和 <span> 元素添加背景颜色。

尝试编辑示例，并将指定的颜色替换为任何可用的 <color> 值。

html

<div class="box">
  <h2>Background Colors</h2>
  <p>Try changing the background <span>colors</span>.</p>
</div>

css

.box {
  padding: 0.3em;
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
span {
  background-color: rgb(255 255 255 / 50%);
}

背景图像

background-image 属性允许在元素的背景中显示图像。在下面的示例中，我们有两个盒子 — 一个的背景图像比盒子大 (balloons.jpg)。另一个有一个小星星的图像 (star.png)。

此示例演示了背景图像的两件事。默认情况下，大图像不会按比例缩小以适应盒子，所以我们只看到它的一小部分，而小图像则平铺以填充盒子。

html

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

css

.wrapper {
  display: flex;
}

.box {
  width: 200px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.a {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
}

.b {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
}

如果您除了背景图像之外还指定了背景颜色，那么图像会显示在颜色之上。尝试在上面的示例中添加 background-color 属性，看看它的效果。

控制 `background-repeat`

background-repeat 属性用于控制图像的平铺行为。可用值包括：

no-repeat — 完全停止背景重复。
repeat-x — 水平重复。
repeat-y — 垂直重复。
repeat — 默认值；在两个方向上重复。
space — 尽可能多地重复，如果有额外空间，则在图像之间添加空间。
round — 类似于 space，但会拉伸图像以填充任何额外空间。

在下面的示例中尝试这些值。我们已将值设置为 no-repeat，因此您只会看到一颗星星。尝试不同的值以查看它们的效果。

html

<div class="box"></div>

.box {
  width: 200px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

css

.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
}

调整背景图像尺寸

最初背景图像示例中使用的 balloons.jpg 图像是一个大图像，由于它比作为背景的元素大，因此被裁剪了。在这种情况下，我们可以使用 background-size 属性来调整图像大小以适应背景。

background-size 可以采用两个 <length> 或 <percentage> 值来指定图像在水平和垂直方向上的大小，或者以下关键字：

cover — 浏览器会使图像足够大，使其完全覆盖盒子区域，同时保持其宽高比。在这种情况下，部分图像可能会超出盒子。
contain — 浏览器会使图像大小合适以适应盒子内部。在这种情况下，如果图像的宽高比与盒子的不同，您可能会在图像的两侧或顶部和底部出现空白。

使用 `background-size`

在下面的示例中，balloons.jpg 图像已设置长度单位，使其适合盒子内部。您可以看到这已使图像失真。

尝试以下操作：

更改用于修改背景大小的长度单位。
删除长度单位，并查看使用 background-size: cover 或 background-size: contain 时会发生什么。
将图像尺寸设置得比盒子小，然后更改 background-repeat 的值以重复图像。

html

<div class="box"></div>

.box {
  width: 500px;
  height: 100px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 10px;
}

css

.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  background-repeat: no-repeat;
  background-size: 80px 10em;
}

定位背景图像

background-position 属性允许您选择背景图像在应用它的盒子上的位置。这使用了一个坐标系，其中盒子的左上角是 (0,0)，并且盒子沿水平 (x) 和垂直 (y) 轴定位。

注意：默认的 background-position 值为 (0,0)。

最常见的 background-position 值采用两个单独的值 — 一个水平值，后跟一个垂直值。您可以使用关键字，例如 top 和 right（在 background-position 页面上查找其他关键字）

css

.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: top center;
}

您还可以使用 lengths 和 percentages

css

.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

您还可以将关键字值与长度或百分比混合使用，在这种情况下，第一个值表示水平位置，第二个值表示垂直位置。例如：

css

.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: 20px top;
}

最后，您还可以使用 4 值语法来指示与盒子特定边缘的距离。每对值表示要偏移的盒子边缘，以及与该边缘的偏移量。在下面的代码片段中，我们将背景定位为距离 top 20px 和距离 right 10px。

css

.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

使用 `background-position`

使用下面的示例来尝试这些值，并在盒子内移动星星。

html

<div class="box"></div>

.box {
  width: 500px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

css

.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
  background-position: 120px 1em;
}

注意：这里使用了简写 background-position，而不是 background-position-x 和 background-position-y，后者允许您单独设置不同的轴位置值。

渐变背景

渐变——当用作背景时——就像图像一样，也通过使用 background-image 属性来设置。

您可以在 MDN 页面上的 <gradient> 数据类型中找到关于不同类型渐变值以及您可以如何使用它们的信息。

在下面的示例中尝试一些不同的渐变值。最初，我们有一个线性渐变，它延伸覆盖整个第一个盒子，还有一个径向渐变，具有设定的大小，并在第二个盒子中重复。

html

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

css

.wrapper {
  display: flex;
}

.box {
  width: 400px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.a {
  background-image: linear-gradient(
    105deg,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
}

.b {
  background-image: radial-gradient(
    circle,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
  background-size: 100px 50px;
}

注意：一个玩转渐变的有趣方式是使用网络上许多可用的 CSS 渐变生成器之一，例如 CSSGradient.io。您可以创建一个渐变并复制生成它的源代码。

多背景图像

也可以在单个声明中指定多个背景图像。您可以通过用逗号分隔多个 background-image 值来实现此目的。

当您这样做时，背景图像可能会相互重叠。背景将按层堆叠，最后一个列出的背景图像位于堆栈底部，每个之前的图像堆叠在其代码中后续图像的上方。

注意：渐变可以与常规背景图像很好地混合使用。

其他 background-* 属性也可以像 background-image 一样具有逗号分隔的值。

css

background-image:
  url("image1.png"), url("image2.png"), url("image3.png"), url("image4.png");
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;

不同属性的每个值将与其他属性中相同位置的值匹配。例如，上面 image1 的 background-repeat 值将是 no-repeat。然而，当不同属性具有不同数量的值时会发生什么？答案是值较少的属性将循环 — 在上面的示例中，有四个背景图像，但只有两个 background-position 值。前两个位置值将应用于前两个图像，然后它们将再次循环 — image3 将被赋予第一个位置值，image4 将被赋予第二个位置值。

使用多个背景图像

我们来玩一下。下面的示例包含两个背景图像。尝试按以下方式编辑示例：

为了演示堆叠顺序，尝试切换列表中哪个背景图像首先出现。
添加其他 background-* 属性以更改图像的位置、大小或重复值。
尝试添加一个渐变作为第三个 background-image。

html

<div class="wrapper">
  <div class="box"></div>
</div>

css

.wrapper {
  display: flex;
}

.box {
  width: 500px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.box {
  background-image:
    url("https://mdn.github.io/shared-assets/images/examples/star.png"),
    url("https://mdn.github.io/shared-assets/images/examples/big-star.png");
}

背景附件

我们还可以为背景指定在内容滚动时它们如何滚动。这通过 background-attachment 属性控制，该属性可以采用以下值：

scroll：当页面滚动时，元素的背景随之滚动。如果元素内容滚动，背景不移动。实际上，背景固定在页面的同一位置，因此它随页面滚动而滚动。
fixed：使元素的背景固定到视口，这样当页面或元素内容滚动时，它不会滚动。它将始终保持在屏幕上的相同位置。
local：将背景固定到设置它的元素上，因此当您滚动元素时，背景也随之滚动。

background-attachment 属性仅在有内容可滚动时才有效，因此我们制作了一个演示来展示这三个值之间的差异 — 请查看 background-attachment.html（也可在此处查看源代码）。

使用背景简写属性

您经常会看到使用 background 简写属性指定背景，该属性允许您一次性设置所有不同的属性。

如果使用多个背景，您需要为第一个背景指定所有属性，然后用逗号分隔添加下一个背景。在下面的示例中，我们有一个带大小和位置的渐变，然后是一个带 no-repeat 和位置的图像背景，然后是颜色。

在编写背景图像简写值时需要遵循一些规则，例如：

background-color 只能在最后一个逗号之后指定。
background-size 的值只能紧跟在 background-position 之后，用 / 字符分隔，例如：center/80%。

请查看 background 的 MDN 页面以了解更多关于语法的信息。

html

<div class="box"></div>

css

.box {
  width: 500px;
  height: 300px;
  padding: 0.5em;
  background:
    linear-gradient(
        105deg,
        rgb(255 255 255 / 20%) 39%,
        rgb(51 56 57 / 100%) 96%
      )
      center center / 400px 200px no-repeat,
    url("https://mdn.github.io/shared-assets/images/examples/big-star.png")
      center no-repeat,
    rebeccapurple;
}

背景的无障碍性考量

当将文本放置在背景图像或颜色之上时，您应确保文本具有足够的对比度，以便访问者能够清晰阅读。当指定带有文本内容的图像时，您还应指定一个 background-color，以便在图像未加载时文本仍可清晰阅读。

屏幕阅读器无法解析背景图像；因此，它们应纯粹是装饰性的。任何重要的内容都应是 HTML 页面的一部分，而不应包含在背景中。

边框

在学习盒模型时，我们发现了边框如何影响盒子的大小。在本课程中，我们将探讨如何创造性地使用边框。

通常，当我们使用 CSS 为元素添加边框时，我们使用 border 简写属性在一个声明中设置盒子所有四条边的边框颜色、宽度和样式。

css

.box {
  border: 1px solid black;
}

或者我们可以针对盒子的一条边，例如：

css

.box {
  border-top: 1px solid black;
}

单个属性包括 border-width、border-style 和 border-color 简写属性。

css

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

还有针对四条边的宽度、样式和颜色的长手属性。

css

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

注意：这些上、右、下、左边框属性还具有映射的逻辑边框属性，这些属性与文档的书写模式相关（例如，从左到右或从右到左的文本，或从上到下）。您可以在处理不同文本方向中阅读这些内容。

使用边框

边框有各种样式可供使用。在下面的示例中，我们为盒子使用了两种不同的边框样式，为标题使用了两种不同的边框样式。尝试调整边框样式、宽度和颜色，看看边框是如何工作的。

html

<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>

css

* {
  padding: 0.2em;
}
.box {
  width: 500px;
  background-color: #567895;
  border: 5px solid #0b385f;
  border-bottom-style: dashed;
  color: white;
}

h2 {
  border-top: 2px dotted rebeccapurple;
  border-bottom: 1em double rgb(24 163 78);
}

圆角

您可以使用 border-radius 属性和与其相关的长手属性为盒子添加圆角，这些长手属性与盒子的每个角相关。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在许多情况下，您只需传入一个值，该值将同时用于两者。

例如，要使盒子的所有四个角都具有 10px 的半径：

css

.box {
  border-radius: 10px;
}

或者使右上角具有 1em 的水平半径和 10% 的垂直半径：

css

.box {
  border-top-right-radius: 1em 10%;
}

注意：与上述边框属性一样，这些 border-radius 属性也具有映射的逻辑 border-radius 属性。

使用边框半径

我们已经在下面的示例中设置了所有四个角，然后更改了右上角的值以使其不同。您可以调整这些值来更改角。请查看 border-radius 属性页面以查看可用的语法选项。边框半径生成器可用于为您输出圆角值。

html

<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>

css

.box {
  width: 500px;
  height: 110px;
  padding: 0.5em;
  border: 10px solid rebeccapurple;
  border-radius: 1em;
  border-top-right-radius: 10% 30%;
}

总结

您可以看到，为盒子添加背景或边框涉及的内容相当多。如果您想了解更多关于此处讨论的任何功能，请探索不同的属性页面。MDN 上的几乎每个页面都有示例供您练习，以增强您的知识。

在下一篇文章中，我们将为您提供一些测试，您可以用来检查您对我们提供的背景和边框样式信息的理解和掌握程度。

帮助改进 MDN

了解如何贡献

本页面最后修改于 2025 年 8 月 21 日，由 MDN 贡献者完成。

在 GitHub 上查看此页面 • 报告此内容的问题

背景和边框

使用 background-size

使用 background-position

帮助改进 MDN

使用 `background-size`

使用 `background-position`