04背景与边框

背景是墙面的「装修」，边框是盒子的「相框」。这一章把 background 一族（颜色、图片、平铺、位置、尺寸、简写）和 border / border-radius / outline 一网打尽。

约 25 分钟 13 个动手实验 属性值全家桶

一、background-color：背景色与透明度

background-color 属性用于设置元素的背景颜色。这是 CSS 中最基础的背景属性之一， 可以接受任何有效的 CSS 颜色值，包括颜色关键字、十六进制值、RGB、HSL 等格式。

属性详解：background-color 会填充元素的整个内容区域和内边距区域， 但不包括边框和外边距。如果元素有圆角，背景色也会跟随圆角形状。
background-color 常用值：从纯色到半透明
值效果使用场景
#C08A3E十六进制色，不透明纯色背景，最常用卡片、按钮、页面的基础底色
rgb(192, 138, 62)与十六进制等价的十进制写法需要按通道读数值、做 JS 计算时
rgba(150, 101, 44, 0.35)第 4 位控制透明度，只透明背景、不影响文字图片上的彩色蒙层、半透明底色
hsl(30, 60%, 50%)按色相 / 饱和度 / 亮度取色，同色系调色方便做一套深浅主题色板
coral 等关键字浏览器内置的 140+ 个命名颜色快速打草稿、教学演示
transparent（默认值）完全透明，露出下层内容需要「看穿」元素时显式声明
五种写法各来一块：把 rgba 的第 4 位改成 0.8，看半透明变浓
使用场景：
1. 纯色背景：为卡片、按钮、输入框等元素设置基础背景色
2. 半透明蒙层：在图片上叠加彩色蒙层，增强文字可读性
3. 状态指示：通过背景色变化表示元素的不同状态（悬停、激活、禁用等）
4. 分层设计：使用不同透明度的背景色创建视觉层次
注意事项：
1. background-color 不会被子元素继承，但会透过子元素的透明区域显示
2. 使用 rgba() 或 hsla() 设置透明度时，只影响背景色，不影响内容文字
3. 透明度值范围：0（完全透明）到 1（完全不透明）
4. 在响应式设计中，背景色通常与文字颜色形成足够对比度以满足无障碍标准

二、background-image：背景图与默认平铺

background-image 属性用于为元素设置背景图像。这是创建视觉层次、 添加纹理和实现复杂背景效果的核心属性。

属性详解：background-image 可以接受多种类型的图像值—— url() 引用图像文件、三种渐变函数现场「画图」、none 表示不设置。详见下表。
background-image 常用值：引用图片，或者用渐变「画」一张
值效果使用场景
url("images/hero.jpg")引用外部 / 内联图像文件，路径相对于 CSS 文件照片、纹理、图标背景
linear-gradient()线性渐变，浏览器现场画出来的图渐变 banner、条纹图案
radial-gradient()径向渐变，从圆心向外扩散光晕、圆点纹理
conic-gradient()锥形渐变，绕圆心转一圈（CSS3 新增）饼图、色轮
none（默认值）不设置背景图像覆盖掉别人写过的背景图

重要特性：背景图默认会像铺瓷砖一样重复铺满整个元素。 为了离线可演示，下面用渐变生成一块 28px 的「瓷砖」代替图片，平铺现象一目了然：

渐变当「瓷砖」：把 background-size 改成 56px 56px，看每块瓷砖变大
使用场景：
1. 全屏头图：使用 background-size: cover 实现响应式全屏背景
2. 纹理图案：使用小尺寸图片平铺创建重复图案
3. 渐变背景：使用渐变函数创建平滑的颜色过渡效果
4. 图标背景：为按钮、链接等元素添加图标背景
5. 多层背景：叠加多个背景图像创建复杂视觉效果
注意事项：
1. background-image 不会被子元素继承
2. 背景图像会覆盖在 background-color 之上
3. 如果图像加载失败，会显示 background-color 作为后备
4. 渐变也是 background-image 的一种值——它让「一张图」不依赖任何图片文件
5. 在移动端要注意背景图像的加载性能，特别是大尺寸图像

三、repeat / position / size / attachment：精细控制

这四个属性共同控制背景图像的显示方式。它们可以单独使用，也可以组合使用， 为开发者提供了精细控制背景图像的能力。

属性关系：background-repeat 控制平铺方向， background-position 控制位置，background-size 控制尺寸， background-attachment 控制滚动行为。这四个属性通常与 background-image 配合使用。

3.1 background-repeat：平铺方式

background-repeat 六个值：同一块瓷砖，六种铺法
值效果使用场景
repeat（默认值）水平和垂直方向都平铺，边缘处裁切纹理壁纸、铺底图案
repeat-x只在水平方向平铺顶部装饰条、横向分隔带
repeat-y只在垂直方向平铺左右侧栏的阴影条
no-repeat不平铺，只显示一张图标、logo，常配合 position 定位
space平铺并均匀分布空隙，两端的图不被裁剪要求每块图案完整出现的图案墙
round平铺并自动缩放图像，凑整数铺满不留缝对图案比例不敏感的铺底
同一块瓷砖六种铺法：把 repeat-x 改成 repeat-y，看铺法转向

3.2 background-position：定位方式

两个值先横后纵。关键是百分比的语义： 50% 并不是「图的左缘放在容器 50% 处」，而是图的 50% 处对齐容器的 50% 处—— 所以 center（即 50% 50%）恰好居中，100% 100% 等价于 right bottom。 像素值则是从左上角起算的精确偏移。

background-position 常用写法：关键字、百分比、像素可以混用
值效果使用场景
center水平、垂直都居中（等价 50% 50%）头图、头像裁切的安全位
right bottom关键字九方位任选，顺序可交换贴在角落的装饰图
15% 20%「对齐点」语义：图的 15% 处对齐容器 15% 处跟随容器缩放的响应式定位
20px 30px从左上角落点精确偏移雪碧图（精灵图）取单个图标
center 20px水平居中，垂直距顶 20px，混合写法居中但需微调的装饰图
right 20px bottom 10px四值语法：先指定边，再写相对该边的偏移「距右 20、距底 10」的固定角标
红圆就是那张「背景图」：把 15% 20% 改成 50% 50%，看它跳到正中央

3.3 background-size：尺寸控制

background-size 常用值：cover 铺满裁边，contain 完整留白
值效果使用场景
auto（默认值）保持图像原始尺寸小图标、纹理瓷砖
cover等比缩放到铺满容器，超出部分裁掉全屏头图、封面图
contain等比缩放到完整装进容器，可能留白必须看全图的展示位
90px 60px强制拉成指定宽高，比例可能变形严格控制占位的缩略图
50% 80%相对容器的宽和高分别缩放跟随容器伸缩的背景
100%（单值）宽撑满、高度 auto 等比通栏横幅背景
同一张 120×80「照片」五种尺寸：把 cover 改成 contain，看裁切变留白

3.4 background-attachment：滚动行为

background-attachment 三个值：背景「钉」在哪
值效果使用场景
scroll（默认值）背景钉在元素上，元素滚动它跟着走绝大多数普通背景
fixed背景钉在视口上，滚动时内容从图上「滑过」视差滚动头图（移动端慎用）
local背景钉在元素内容上，内部滚动时图随内容走可滚动面板里的背景
注意事项：
1. background-attachment: fixed 在移动端 Safari 中支持较差，慎用
2. fixed 会让背景固定在视口中，创建视差滚动效果
3. local 值在移动端支持较好，但兼容性不如 scroll
4. 在性能敏感的页面中，避免同时使用多个 fixed 背景
背景四兄弟速查总表
属性常用值说明
background-repeatrepeat / no-repeat / repeat-x / repeat-y / space / round平铺方向，默认 repeat
background-positioncenter / right bottom / 15% 20% / 12px 12px图片位置，先横后纵
background-sizecover / contain / 100px / 100% / autocover 铺满裁边，contain 完整留白
background-attachmentscroll（默认）/ fixed / localfixed 让背景固定不动，滚动时内容「从图上滑过」，常做视差头图；移动端 Safari 支持差，慎用
全屏头图三件套（背下来）：
background-size: cover; background-position: center; background-repeat: no-repeat;
——任何尺寸的屏幕都能得到一张居中、铺满、不重复的头图。

四、background 简写：顺序与陷阱

background 是背景属性的简写形式，可以一次性设置所有背景相关属性。 这是 CSS 中最常用的简写属性之一，但使用时需要注意顺序和陷阱。

简写语法：background: [颜色] [图片] [平铺] [位置] / [尺寸] [滚动] [原点] [裁剪];
注意：斜杠 / 用于分隔 background-position 和 background-size。
background 简写推荐顺序：没写的位置用默认值补上
顺位子属性省略时默认值备注
1background-colortransparent一层背景只能有一个颜色，建议放最前
2background-imagenoneurl() 或渐变函数
3background-repeatrepeat—
4background-position0% 0%和尺寸之间必须用 / 分隔
5background-sizeauto只能紧跟在 position 的斜杠后面
6background-attachmentscroll—
7background-originpadding-box背景从哪一层开始铺
8background-clipborder-box背景画到哪一层为止
简写一次到位：颜色 图片 平铺 位置 / 尺寸——把斜杠后的 80px 改成 40px，看圆点变小
重要陷阱：
1. 斜杠分隔符：位置和尺寸之间必须写 /，写成空格整条声明作废
2. 属性重置：简写会重置所有没写的子属性——先写 background: url(a.png) 再补 background-color: #fff 没问题，但反过来简写会把颜色冲掉
3. 顺序重要：虽然大多数浏览器能容忍顺序变化，但遵循推荐顺序可以确保兼容性
4. 省略规则：可以省略任何值，省略的值使用默认值，但斜杠不能省略
5. 建议：要么全用简写，要么全用分写，别混着来
使用建议：
1. 简单背景：使用简写，代码更简洁
2. 复杂背景：使用分写，更易维护和调试
3. 多背景：必须使用简写，用逗号分隔多个背景
4. 渐变背景：通常使用简写，将渐变函数作为背景图像
5. 响应式设计：建议使用分写，便于媒体查询中单独修改某个属性

五、border：三件套、简写与八种样式

border 属性用于设置元素的边框。边框由三个核心属性组成： border-width（粗细）、border-style（线型）、 border-color（颜色）。这三个属性可以单独设置，也可以通过简写属性一次性设置。

属性详解：border 是简写属性，语法为 border: [粗细] [线型] [颜色];。 其中 border-style 是必须的，如果省略，边框将不会显示。 其他属性可以省略，省略时使用默认值：border-width: medium、 border-color: 元素的 color 值。
八种线型同台：把 double 那行的粗细改成 2px，看「双线」挤成一条

5.1 border-style 属性详解

border-style 全家桶：不写 style 就没有边框
值效果使用场景
none（默认值）无边框——忘了写 style 时边框完全不显示主动去除边框
hidden同 none，但在表格边框冲突时优先级更高处理表格边框冲突
solid实线最常用：卡片、按钮、输入框
dashed虚线占位区、待上传的虚线框
dotted点线柔和的提示框、装饰线
double双线，宽度至少 3px 才能看出效果复古证书、票据风
groove3D 凹槽，阴影色由 border-color 决定拟物风界面
ridge3D 凸脊，阴影色由 border-color 决定拟物风界面
inset3D 内嵌，元素像「陷进去」拟物风界面
outset3D 外凸，元素像「浮出来」拟物风界面

复合值同样按顺时针展开：border-style: solid dashed dotted double; = 上实线、右虚线、下点线、左双线。

5.2 border-width 属性详解

border-width 常用值：关键字三个，长度随意，还能四边分开
值效果使用场景
thin细边框（通常 1px，具体由浏览器决定）发丝级分隔线
medium（默认值）中等边框（通常 3px）一般不明写，知道默认是它即可
thick粗边框（通常 5px）需要强调的框
2px / 0.5em 等长度精确控制，日常工作主力一切日常边框
2px 4px 6px 8px1~4 个值，上右下左顺时针，缺省找对面补齐四边粗细不同时

5.3 border-color 属性详解

border-color 常用值：不写时跟随文字颜色
值效果使用场景
#C08A3E 等颜色值任意合法 CSS 颜色日常边框配色
rgba(150, 101, 44, 0.5)半透明边框，会透出下层背景叠加层次的轻边框
currentColor（默认值）跟随元素的 color 值，文字变色边框跟着变边框想与文字同色时（省略不写即可）
transparent透明边框：看不见但占位置hover 才显示边框，提前占位防抖动
金 棕 绿 红（1~4 值）四边异色，顺时针：上 右 下 左彩色拼接装饰
新手最常踩的坑：写了 border-width 和 border-color 却忘了 border-style——边框完全不见，因为 style 默认是 none。 「没边框」先查 style。
使用场景：
1. 卡片边框：使用 border: 1px solid #e0e0e0 创建卡片容器
2. 输入框边框：使用不同边框状态表示输入框的聚焦、错误等状态
3. 分隔线：使用 border-bottom 创建列表项之间的分隔线
4. 装饰边框：使用不同线型和颜色创建装饰性边框效果
5. 响应式边框：在媒体查询中调整边框粗细或样式

六、单边边框与实战：选项卡指示线

CSS 允许为元素的四条边分别设置边框。这提供了极大的灵活性， 可以创建各种复杂的边框效果，如单边强调线、选项卡指示器等。

单边边框属性：border-top / border-right / border-bottom / border-left。 每个都是简写属性，一条里同时设置宽度、样式和颜色；也可以再拆成 border-top-width 等九个分写属性。
四条边各上一色：把 border-top 改成 border-left，看强调条换边

6.1 实战：选项卡（Tab）选中指示

实战名场面——选项卡（tab）的选中指示： 选中的标签用 border-bottom: none 摘掉底边， 再用 margin-bottom: -2px 往下压 2 像素，盖住内容区的上边框， 视觉上「标签与面板连成一体」：

选中态 = 去底边 + 负 margin 下压：把 -2px 改成 0，看标签与面板之间「裂开」一条线

如果项目里标签用 flex 布局，同样的思路换一副骨架——透明边框占位、选中时换成白色底边盖住分隔线：

单边边框的日常用法：
1. 消息提示条：左边 4px 强调线，表示不同类型的信息（成功、警告、错误）
2. 表格分隔线：使用 border-bottom 创建表格行之间的分隔线
3. 导航吸底阴影：在导航栏底部添加边框或阴影
4. 列表项分隔：在列表项之间添加底部分隔线
5. 表单字段分组：使用左边框为相关字段添加视觉分组
6. 卡片装饰：在卡片顶部添加彩色边框作为装饰
注意事项：
1. 单边边框会增加元素的尺寸，可能影响布局
2. 使用 box-sizing: border-box 可以避免边框撑大元素
3. 在响应式设计中，可能需要在不同屏幕尺寸下调整边框
4. 过多的边框可能会让界面显得杂乱，应适度使用

七、border-radius：圆角、圆与胶囊

border-radius 属性用于设置元素的圆角。这是 CSS3 中最常用的属性之一， 可以创建从轻微圆角到完全圆形的各种效果。

属性详解：border-radius 是一个简写属性，可以设置一到四个值， 按左上 → 右上 → 右下 → 左下顺时针展开，缺的值「对角补齐」。 值可以是长度单位（px、em、rem）或百分比。
border-radius 写法速查：从常规圆角到斜杠椭圆弧
写法效果使用场景
border-radius: 10px一个值：四个角相同卡片、输入框的常规圆角
border-radius: 10px 20px两个值：左上右下一组，右上左下一组对角呼应的错落设计
border-radius: 10px 20px 30px三个值：左上 | 右上左下 | 右下较少用，知道规则即可
border-radius: 10px 20px 30px 40px四个值：顺时针各角独立四角各不同的异形卡
border-top-left-radius: 40px单角属性，只圆一个角选项卡、聊天气泡
50%（正方形元素）完美的圆头像、圆形徽章
50%（长方形元素）椭圆椭圆形装饰
999px半径超过半高即胶囊，一劳永逸不用算按钮、标签的胶囊形
70px 30px / 35px 60px斜杠分隔水平 / 垂直半径，角变成椭圆弧不规则有机形状
七种圆角形态：把「圆」的 50% 改成 30%，看正圆变圆角方
口诀：
1. 「正方形配 50% 是圆」：宽度和高度相等时，50% 的圆角会创建完美的圆形
2. 「胶囊要半径盖过半高」：圆角值大于或等于高度的一半时，会创建胶囊形状
3. 「长方形配 50% 是椭圆」：宽度和高度不等时，50% 的圆角会创建椭圆形
4. 「999px 一劳永逸」：实际写胶囊不必算数，直接使用很大的值（如 999px）
使用场景：
1. 卡片圆角：为卡片容器添加轻微圆角（如 8px、12px）
2. 按钮圆角：为按钮添加圆角，通常使用胶囊形状
3. 头像圆形：使用 50% 圆角创建用户头像的圆形效果
4. 徽章胶囊：使用胶囊形状创建标签、徽章等元素
5. 图片圆角：为图片添加圆角，使其更融入设计
6. 输入框圆角：为输入框添加轻微圆角，提升用户体验
高级技巧：
1. 水平/垂直半径：可以使用斜杠 / 分隔水平和垂直半径，创建更复杂的圆角形状
2. 动画圆角：可以使用 CSS 过渡或动画来平滑地改变圆角值
3. 响应式圆角：使用相对单位（如 em、rem）或百分比来创建响应式圆角
4. 边框圆角：圆角会同时影响边框和背景，保持视觉一致性

八、outline：不占布局的轮廓线

outline 属性用于设置元素的轮廓。轮廓与边框类似，但有一些关键区别： 轮廓不占用空间，不会影响元素的尺寸和布局，通常用于表示元素的聚焦状态。

outline vs border：
• 位置：outline 画在边框外侧，border 是元素的一部分
• 空间：outline 不占空间，border 会占用空间
• 圆角：outline 跟随 border-radius，但可能不完全贴合
• 单边：border 可以设置单边，outline 只能四边统一
• 用途：outline 通常用于 :focus 状态，border 用于装饰和布局
outline 一族：写法和 border 几乎一样，多一个 offset
属性 / 值效果使用场景
outline: 3px solid #C08A3E简写：粗细 线型 颜色，style 同样是灵魂焦点圈一把梭
outline-width同 border-width：thin / medium / thick / 长度需要更粗的焦点指示
outline-style与 border-style 同一套值，默认 none虚线焦点圈等个性样式
outline-color任意颜色，默认 currentColor与背景形成高对比的焦点色
outline-offset: 3px轮廓与元素边缘之间的空隙，可正可负让焦点圈「悬空」不贴边，更精致
点击预览区里的按钮 / 输入框（或按 Tab 切换焦点），观察轮廓与 outline-offset 的空隙

8.1 outline 与 border 的对比

再用两个同尺寸盒子直观对比「占不占布局」（特意用 content-box，下一章会讲为什么）：

border 把盒子撑宽 12px 还得多给 34px 外边距；outline 画在外面、布局纹丝不动——量量两个盒子的占位宽度
border 与 outline 全方位对比
对比项borderoutline
是否占布局占：撑大盒子、推开邻居不占：悬浮在外侧
能否只设单边能（border-top 等）不能，四边一体
跟随圆角天然跟随 border-radius现代浏览器也跟随圆角
典型用途卡片描边、分隔线、装饰:focus 聚焦框、调试看边界
性能影响重绘和回流通常只触发重绘
无障碍红线：别为了好看随手 outline: none—— 键盘用户会瞬间失去「我在哪」的指示。要美化聚焦态，正确做法是像上面那样 自定义 :focus 的 outline 样式，而不是删掉它。
使用场景：
1. 聚焦状态：为可交互元素（按钮、链接、输入框）添加聚焦轮廓
2. 调试布局：临时添加 outline 来查看元素的实际边界
3. 无障碍设计：确保键盘导航时有清晰的焦点指示
4. 高亮显示：在特定状态下（如选中、激活）显示轮廓
5. 表单验证：在输入框验证失败时显示红色轮廓
最佳实践：
1. 始终提供焦点指示：对于可交互元素，必须提供可见的焦点状态
2. 自定义样式：使用 :focus-visible 伪类，在键盘导航时显示焦点
3. 对比度：确保焦点轮廓与背景有足够的对比度
4. 一致性：在整个网站中保持焦点样式的统一
5. 偏移量：使用 outline-offset 避免轮廓紧贴元素边缘

九、本章小结

  • 背景五虎将：background-color / image / repeat / position / size，简写顺序「颜色 图片 平铺 位置 / 尺寸」
  • 背景图默认平铺；全屏头图三件套：cover + center + no-repeat
  • rgba 第 4 位做半透明背景；渐变也是一种 background-image
  • 边框三件套缺一不可，不写 border-style 就没有边框
  • 单边边框做指示线；选项卡选中态 = 去底边 + 负 margin 下压
  • 圆角口诀：正方形 50% 成圆，半径过半高成胶囊
  • outline 不占布局，专职 :focus 聚焦框；删 outline 前请三思
  • 背景附件：background-attachment: fixed 创建视差滚动效果
  • 简写陷阱：位置和尺寸之间必须写 /，简写会重置未写的子属性
动手练习：做一张「音乐专辑卡」——卡片白底圆角 16px 带 1.5px 边框； 顶部用 linear-gradient 画 120px 高的封面区（两种你喜欢的颜色）； 右上角一个 50% 圆形的「Hi-Res」小徽章；歌名加粗，歌手用半透明色； 底部一条胶囊形「播放」按钮。每个属性都在编辑器里改值验证过再往下走。

十、章节练习

使用本章学到的背景和边框知识，创建一个个人资料卡片。要求如下：

练习：创建个人资料卡片

基本要求：

  1. 卡片容器：白色背景，圆角 12px，2px 实线边框（颜色自选）
  2. 头像区域：100px × 100px 的圆形头像，使用 50% 圆角
  3. 用户名：加粗，使用半透明背景色（rgba）
  4. 简介文字：使用较小的字号，颜色稍浅
  5. 关注按钮：胶囊形状，使用渐变背景

进阶要求：

  1. 为卡片添加轻微的阴影效果（box-shadow，下一章会详细讲）
  2. 为按钮添加聚焦状态的 outline 样式
  3. 使用背景图或渐变为卡片顶部添加装饰条
  4. 为卡片添加悬停效果（如轻微放大或边框颜色变化）

提示：

  • 使用 border-radius: 50% 创建圆形头像
  • 使用 background: linear-gradient(...) 创建渐变按钮
  • 使用 background-color: rgba(...) 创建半透明背景
  • 使用 outline 为按钮添加聚焦样式
  • 使用 background-image 和 background-size 创建装饰条

参考实现（可以直接改着玩）：

参考答案实跑版：把 ::before 装饰条的渐变换成你喜欢的三种颜色

挑战任务：

  1. 使用 background-attachment: fixed 为卡片添加视差滚动效果
  2. 使用 background-size: cover 为卡片添加全屏背景图
  3. 使用 border-image 为卡片添加图片边框
  4. 使用 background-blend-mode 创建混合模式效果