CSS-Backgrounds-Borders-and-Shadows

CSS background border border-radius box-shadow outline

字数统计: 3.5k阅读时长: 14 min

 2026/07/29 

第22课：背景与边框

元素的视觉边界由背景和边框共同定义。背景填充内容区与内边距区域，边框勾勒出元素的轮廓，而阴影则赋予元素立体感与层次。这三个看似基础的属性，各自拥有强大的子属性和高级用法——多重背景叠加、渐变生成图像、圆角与椭圆角、内外阴影组合——能够在不依赖任何图片资源的情况下实现丰富的视觉效果。本节课将逐一深入这些属性的语法细节、渲染规则与常见应用场景。

1. `background` 背景体系

background 是一个简写属性，可同时设置八个子属性。其完整语法如下，但实际使用中几乎不会全部书写：

1	background: [bg-image] [bg-position] / [bg-size] [bg-repeat] [bg-attachment] [bg-origin] [bg-clip] [bg-color];

关键规则：

background-size 必须紧跟在 background-position 之后，且以 / 分隔。
若同时指定 background-origin 和 background-clip，顺序为 origin 在前 clip 在后；若只写一个，则同时应用于两者。
未显式设置的子属性会采用其初始值，可能覆盖之前单独设置的值。

1.1 `background-color`：背景色

设置元素的纯色背景。默认值为 transparent（透明）。

.box {
  background-color: #f0f0f0;
  /* 也可使用关键字、rgb()、hsl() 等 */
  background-color: rgba(0, 0, 0, 0.05); /* 半透明黑色 */
}

背景色的覆盖范围：受 background-clip 控制（见 1.7 节），默认覆盖到边框外沿（即 border-box）。

1.2 `background-image`：背景图像

可以指定一个或多个背景图像（用逗号分隔），先声明的图像在最上层。

1
2
3

.hero {
  background-image: url("overlay.png"), url("bg-photo.jpg");
}

允许的值：

url() 引用外部图片资源。
渐变函数（linear-gradient()、radial-gradient() 等，见 1.6 节）。
none（默认值，无背景图像）。
多个图像之间用逗号分隔。

与 <img> 的区别：

背景图像不占据内容空间，不影响盒模型尺寸。
背景图像无法设置 alt 替代文本，因此仅应用于装饰性图像。需要传达信息的内容图片应使用 <img> 标签。

1.3 `background-repeat`：重复模式

控制背景图像是否重复以及如何重复。

值	行为
`repeat`	沿水平和垂直方向平铺（默认）。
`repeat-x`	仅水平方向平铺。
`repeat-y`	仅垂直方向平铺。
`no-repeat`	不平铺，图像仅显示一次。
`space`	尽可能多平铺且不裁剪，图像之间均匀留白。
`round`	拉伸或压缩图像以恰好填满空间（不裁剪，不留白）。

.pattern {
  background-image: url("tile.png");
  background-repeat: repeat;
}

1.4 `background-position`：图像定位

定义背景图像在背景区域内的初始位置。

语法：background-position: x y;（水平垂直）。默认值为 0% 0%（左上角）。

取值方式：

关键词：left、center、right（水平）；top、center、bottom（垂直）。
长度值：px、em、%。
组合：center center 等同于 center（居中）；right 20px bottom 10px（距右边 20px，距底部 10px）。

.hero {
  background-image: url("photo.jpg");
  background-position: center center; /* 居中 */
  background-size: cover; /* 填满容器 */
}

百分比定位的算法：百分比值相对于“容器尺寸减去图像尺寸”。例如 background-position: 50% 50% 表示图像自身的 50% 点与容器的 50% 点对齐，从而实现居中。

1.5 `background-size`：图像尺寸

控制背景图像的缩放尺寸。

值	行为
`auto`	图像原始尺寸（默认）。
`cover`	缩放图像以完全覆盖背景区域，保持宽高比，可能裁剪图像。
`contain`	缩放图像以完整显示在背景区域内，保持宽高比，可能留下空白。
长度/百分比	显式设置宽度和高度（如 `200px 150px`，单值则高度为 `auto`）。

/* 全屏 Hero 常用：图像覆盖，居中 */
.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

1.6 渐变：`linear-gradient()` 与 `radial-gradient()`

渐变是 CSS 生成的图像，因此可用于任何接受 <image> 的属性（主要是 background-image）。

线性渐变：沿直线方向过渡颜色。

1
2
3

.gradient-box {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

语法：

1	linear-gradient([<angle> \| to <side-or-corner>], <color-stop-list>)

方向：to right、to bottom、to top left 或角度 45deg、135deg。
色标（Color Stop）：至少两个颜色，可附带位置百分比。

/* 多色标精确控制 */
background-image: linear-gradient(
  135deg,
  #667eea 0%,
  #764ba2 50%,
  #f093fb 100%
);

径向渐变：从一个中心点向外辐射状过渡。

1	background-image: radial-gradient(circle at center, #ff7e5f, #feb47b);

形状：circle（圆形）或 ellipse（椭圆形，默认）。
位置：at center、at top left 等。

重复渐变：repeating-linear-gradient() 和 repeating-radial-gradient() 创建循环的渐变图案。

/* 条纹背景 */
background-image: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

1.7 `background-clip` 与 `background-origin`

控制背景的绘制区域和定位参考区域。

属性	作用	取值及含义
`background-clip`	背景（色和图像）延伸到哪个盒区域。	`border-box`（默认，到边框外沿）、`padding-box`（到内边距外沿）、`content-box`（到内容区外沿）、`text`（仅填充文字形状，需配合 `-webkit-` 前缀）
`background-origin`	背景图像 `position` 的坐标原点参考哪个盒区域。	`padding-box`（默认，原点在内边距左上角）、`border-box`（原点在边框左上角）、`content-box`（原点在内容区左上角）

/* 背景仅填充内容区，从内容区左上角开始定位 */
.card {
  background-clip: content-box;
  background-origin: content-box;
  padding: 20px;
}

background-clip: text 可实现文字渐变效果：

.gradient-text {
  background-image: linear-gradient(45deg, #ff6b6b, #feca57);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

1.8 多重背景

用逗号分隔多个背景层，先声明的在最上层。各子属性的值也用逗号一一对应。

.multi-bg {
  background:
    url("overlay.png") no-repeat center / 150px,
    linear-gradient(to bottom, rgba(0,0,0,0.3), transparent),
    url("photo.jpg") no-repeat center / cover;
}

层叠顺序：第一个背景在最上层（覆盖后续层），最后一个在最底层（通常为底色或底图）。background-color 只能设置在最后一个背景层上。

2. `border` 边框体系

2.1 基本语法与分侧控制

border 简写属性：border: <width> <style> <color>;

1
2
3

.box {
  border: 2px solid #333;
}

三个必填子属性：

子属性	说明	常用值
`border-width`	边框宽度。可为 1~4 个值（上右下左）。	`thin`、`medium`、`thick`、`px`、`em`。
`border-style`	边框样式。必须指定，否则边框不可见（默认 `none`）。	`none`、`solid`、`dashed`、`dotted`、`double`、`groove`、`ridge`、`inset`、`outset`。
`border-color`	边框颜色。默认继承元素的 `color` 颜色。	任何颜色值。

分侧设置：

.box {
  border-top: 3px solid red;
  border-right: 1px dashed blue;
  border-bottom: 2px dotted green;
  border-left: 4px double orange;
}

2.2 `border-radius`：圆角

border-radius 给元素添加圆角。它实际定义了边框拐角处的椭圆弧的半径。

语法：border-radius: <水平半径> / <垂直半径>;（可分别指定水平与垂直半径以创建椭圆角）。

/* 四角统一 10px 圆角 */
.box { border-radius: 10px; }

/* 左上、右上、右下、左下（顺时针） */
.box { border-radius: 10px 20px 30px 40px; }

/* 椭圆角：水平 20px，垂直 10px */
.box { border-radius: 20px / 10px; }

正圆：将 border-radius 设为 50%（要求元素宽高相等）。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

胶囊形状：将 border-radius 设为超过高度一半的值（如 9999px），实现两端完全半圆。

.pill {
  height: 40px;
  border-radius: 9999px;
}

2.3 `border-image`：图像边框

允许使用图像（或渐变）绘制边框，替代纯色线条。

.frame {
  border: 20px solid transparent; /* 必须预留边框宽度 */
  border-image: url("border.png") 30 stretch;
}

子属性：

border-image-source：图像来源（url() 或渐变）。
border-image-slice：分割图像的偏移量（将图像九宫格切分）。
border-image-width：边框图像的显示宽度。
border-image-outset：边框图像向外延伸的距离。
border-image-repeat：图像在边框上的重复方式（stretch、repeat、round）。

实用场景：使用渐变创建渐变边框。

.gradient-border {
  border: 4px solid transparent;
  border-image: linear-gradient(45deg, #ff6b6b, #feca57) 1;
}

注意：border-image 会替换 border-style 和 border-color（但 border-width 仍生效），且 border-radius 对 border-image 无效。若需要渐变边框 + 圆角，可使用伪元素叠加或 background-clip 技巧。

3. `box-shadow`：盒阴影

box-shadow 为元素添加一个或多个阴影（内外均可）。

语法：

1	box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

值	说明	默认值
`inset`	可选。若存在，阴影在边框内部（内阴影）。	外阴影
`offset-x`	水平偏移。正值右移，负值左移。	必须指定
`offset-y`	垂直偏移。正值下移，负值上移。	必须指定
`blur-radius`	模糊半径。值越大越模糊。`0` 为锐利边缘。	`0`
`spread-radius`	扩展半径。正值扩大阴影，负值收缩。	`0`
`color`	阴影颜色。建议使用半透明颜色（`rgba()`）以获得真实感。	取决于浏览器

/* 基础投影：右下偏移，模糊 10px，颜色半透明黑 */
.card {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}

/* 内阴影（凹陷效果） */
.inset-box {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 多重阴影：用逗号分隔，先写的在最上层 */
.layered {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

性能提示：box-shadow 的模糊计算开销较大。在动画或滚动场景中，大量使用阴影可能导致性能下降。此时可考虑使用 will-change: box-shadow 或简化阴影参数。

4. `outline`：轮廓

outline 是在边框外部绘制的一条线，不占据布局空间，不影响元素尺寸。

语法：outline: <width> <style> <color>;（与 border 类似）。

.button:focus-visible {
  outline: 3px solid #4a90d9;
  outline-offset: 2px; /* 轮廓与边框的间距 */
}

与 border 的关键区别：

对比项	`border`	`outline`
占据空间	占据盒模型空间。	不占据空间，叠加在外部元素上。
圆角跟随	受 `border-radius` 影响。	早期规范中不跟随 `border-radius`，现代浏览器已支持跟随（但仍有差异）。
侧边独立控制	可单独设置四条边（`border-top` 等）。	只能统一设置，无法分侧。
用途	装饰性边框、结构性分割线。	焦点指示器（`:focus-visible`）、调试标记。

最佳实践：永远不要移除 :focus-visible 的 outline，除非提供了同样明显的替代焦点指示（如颜色变化、下划线等）。outline-offset 可调整轮廓与元素边缘的距离，常用于营造悬浮感。

课后练习

一、概念自测（选择题 / 填空题）

（单选） 在 background 简写属性中，background-size 必须通过什么符号与 background-position 分隔？
A. 空格
B. 逗号
C. 斜杠 /
D. 分号
（单选） 以下哪个 background-clip 值可以实现文字渐变效果（需配合 color: transparent）？
A. border-box
B. padding-box
C. content-box
D. text
（填空） 要使元素呈现正圆形，应设置 border-radius: ______。
（多选） 关于 box-shadow 的说法，哪些是正确的？
A. 可以同时添加内外阴影（逗号分隔）。
B. spread-radius 可以为负值。
C. 阴影占据盒模型空间，影响布局。
D. 使用半透明颜色可产生更自然的阴影效果。

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要为一个“功能卡片”组件设计视觉样式，要求如下：

卡片白色背景，圆角 12px，内边距 24px。
有微妙的悬浮投影：水平偏移 0，垂直偏移 4px，模糊 12px，扩展 2px，颜色为 rgba(0,0,0,0.08)。
卡片顶部有一个 4px 高的装饰条，使用渐变（从左到右由 #667eea 渐变到 #764ba2）。该渐变条使用 ::before 伪元素实现。
卡片内部有一个“数量”展示区，使用径向渐变圆形背景，从中心 #f093fb 到边缘 #f5576c。
所有背景设置需注意 background-clip 和 background-origin 的合理使用。
鼠标悬停时，卡片的投影加深（模糊增大到 20px），并带轻微上移效果（transform: translateY(-2px)），过渡动画平滑。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 HTML 和 CSS。提示词中应明确指定渐变类型、阴影参数、伪元素用法以及过渡动画。

课后练习答案

一、概念自测答案

C
- 解析：background 简写中，size 必须置于 position 之后并以 / 分隔，如 center / cover。
D
- 解析：background-clip: text 将背景限制在文字形状内，配合透明文字色可实现渐变文字。需加 -webkit- 前缀。
50%
- 解析：当元素宽高相等时，border-radius: 50% 可将矩形变为正圆。
A、B、D
- 解析：阴影不占据空间（C 错误）。spread-radius 可为负值以收缩阴影，内外阴影可逗号分隔组合，半透明颜色使阴影更柔和。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请生成一个功能卡片的 HTML + CSS 样式。要求：

卡片容器 .card：白色背景，圆角 12px，内边距 24px，box-shadow: 0 4px 12px 2px rgba(0,0,0,0.08)。

卡片顶部装饰条使用 .card::before 伪元素：绝对定位在卡片顶部，宽 100%，高 4px，背景 linear-gradient(to right, #667eea, #764ba2)，注意伪元素的 content 和定位参照（卡片设 position: relative）。

卡片内有一个 .stat-badge 显示数量：圆形背景使用 radial-gradient(circle, #f093fb, #f5576c)，设置宽高 80px，圆角 50%，居中显示数字，数字白色加粗。

背景相关属性注意使用 background-clip 和 background-origin（默认即可，但注释说明其作用）。

卡片悬停效果：box-shadow 变为 0 6px 20px 4px rgba(0,0,0,0.12)，transform: translateY(-2px)，过渡 all 0.3s ease。

代码整洁，注释清晰。直接输出完整 HTML 文件。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/07/28/CSS-Backgrounds/

发表日期：July 28th 2026, 4:00:00 pm

更新日期：July 28th 2026, 10:27:15 am

Next Post

CSS-Transforms-and-Transitions
Previous Post

CSS-Fonts-and-Text-Styling

CATALOG

CSS-Backgrounds-Borders-and-Shadows

第22课：背景与边框

1. background 背景体系

1.1 background-color：背景色

1.2 background-image：背景图像

1.3 background-repeat：重复模式

1.4 background-position：图像定位

1.5 background-size：图像尺寸

1.6 渐变：linear-gradient() 与 radial-gradient()

1.7 background-clip 与 background-origin