3.6css背景和边框

background 属性基础

background 是 CSS 中最强大的属性之一，用于定义元素的背景样式。其核心子属性包括：

• background-color（颜色）
• background-image（图片）
• background-repeat（平铺）
• background-position（位置）
• ​**background-origin**​（起始位置）
• ​**background-clip**​（裁剪区域）
• background-size（尺寸）

---

​background-origin：背景的起始位置

决定背景图像或颜色的绘制起点，相对于元素的 ​内容框（Content Box）​、边框盒（Border Box）​ 或 ​内边距盒（Padding Box）​。

值	描述
content-box	背景从元素内容区域开始绘制（默认值）。
border-box	背景从边框外缘开始绘制（包含边框）。
padding-box	背景从内边距区域开始绘制（包含 padding）。

.box {
  width: 300px;
  height: 300px;
  padding: 20px;
  border: 10px solid #ccc;
  background: url("image.jpg") center/cover;
}

/* background-origin: content-box */
.box-content {
  background-origin: content-box;
}

/* background-origin: border-box */
.box-border {
  background-origin: border-box;
}

/* background-origin: padding-box */
.box-padding {
  background-origin: padding-box;
}

效果对比：

• ​**content-box**：背景从内容区开始，不包含 padding 和 border。
• ​**border-box**：背景覆盖整个元素（包括 border）。
• ​**padding-box**：背景从 padding 区域开始。

---

​background-clip：背景的裁剪区域

限制背景的显示