在 CSS 中，背景（background） 和 边框（border） 是常用的样式属性，可以用于美化网页元素。以下是详细介绍：

---

1. CSS 背景（background）

背景相关的 CSS 属性主要包括：

（1）设置背景颜色（background-color）

background-color 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的 <color> 值。background-color 可以延伸至元素的内容和内边距盒子的下面。

.box {
  background-color: lightblue;
}

背景颜色 lightblue 会填充整个元素的背景。

---

（2）设置背景图片（background-image）

1.图片

background-image 属性可以在一个元素的背景中显示一个图像。在下面的例子中，我们有两个盒子，其中一个盒子具有比盒子大的背景图像（balloons.jpg），另一个盒子具有较小的单个星星的图像（star.png）。

.box {
  background-image: url('background.jpg');
}

这样会在 .box 元素的背景中加载 background.jpg 图片。

2.渐变

当渐变用于背景时，也可以使用像图像一样的 background-image 属性设置。

你可以在 MDN 的 <gradient> 数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣的方法是使用网络上许多 CSS 渐变生成器中的一个，比如这个。你可以创建一个渐变，然后复制和粘贴生成它的源代码。

3.多图

也可以有多个背景图像——在单个属性值中指定多个 background-image 值，用逗号分隔每个值。

当你这样做时，你可能会出现背景图片相互重叠的情况。背景将分层，最后列出的背景图片位于最下层，而之前的每张图片都堆在代码中紧随其后的那张图片之上。

>[!tip] 备注：  渐变可以与常规的背景图像很好地混合在一起。

其他 background-* 属性也可以像 background-image 一样使用逗号分隔的方式设置：

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;

---

（3）背景重复（background-repeat）

.box {
  background-image: url('pattern.png');
  background-repeat: repeat-x; /* 只在水平方向重复 */
}

可选值：

• repeat（默认）——水平和垂直方向重复
• no-repeat——不重复
• repeat-x——仅水平重复
• repeat-y——仅垂直重复

MDN-background-repeat示例

---

（4）背景尺寸（background-size）

.box {
  background-image: url('bg.jpg');
  background-size: cover;
}

• cover：浏览器将使图像足够大，使它完全覆盖了盒子区域，同时仍然保持其宽高比。在这种情况下，图像的部分区域可能会跳出盒子外。
• contain：浏览器会将图像调整到适合框内的尺寸。在这种情况下，如果图像的长宽比与盒子的长宽比不同，你可能会在图像的两边或顶部和底部出现空隙。
• 100px 200px：指定宽度和高度
• auto：保持图片原始大小

MDN-background-size

---

（5）背景位置（background-position）

background-position 属性允许你选择背景图片出现在它所应用的盒子上的位置。这使用了一个坐标系统，其中方框的左上角是 (0,0)，方框沿水平（x）和垂直（y）轴定位。

>[!tip] 备注： 默认的 background-position 值是 (0,0)。

.box {
  background-image: url('bg.jpg');
  background-position: center top;
}

第一个值必须指水平位置或偏移，第二个值指垂直位置

• left top：左上角
• center center：正中央
• right bottom：右下角
• 50% 50%：相对于容器的百分比位置

你还可以使用四值语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的 CSS 中，我们将背景定位在距顶部 20px 和右侧 10px 处：

• top 20px right 10px

>[!tip] 备注：  简写属性 background-position 用于替代 background-position-x 和 background-position-y，它们允许用户分别设置不同坐标轴的值。

---

（6）背景固定（background-attachment）

.box {
  background-image: url('bg.jpg');
  background-attachment: fixed;
}

• scroll（默认）：背景随页面滚动
• fixed：背景固定，不随滚动条移动
• local：背景跟随元素的滚动而滚动

MDN-background-attachmet示例

---

（7）背景的简写（background）

.box {
  background: url('bg.jpg') no-repeat center/cover fixed;
}

这是 background 属性的简写方式，等同于：

background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;

---

2. CSS 边框（border）

边框相关的 CSS 属性主要包括：

（1）设置边框 (宽度 样式 颜色)

边框样式（style）：

• solid：实线
• dashed：虚线
• dotted：点线
• double：双线
• ridge / groove / inset / outset：3D 效果

.box {
  border: 2px solid red;
}

等同于：

border-width: 2px;
border-style: solid;
border-color: red;

---

（2）单独设置边框

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

可以单独控制四条边的样式。

---

（3）边框圆角（border-radius）

.box {
  border: 2px solid black;
  border-radius: 10px; /* 圆角边框 */
}

• border-radius: 50%; 可用于创建圆形或椭圆形元素。

---

（4）边框阴影（box-shadow）

.box {
  width: 200px;
  height: 100px;
  border: 2px solid black;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

• 5px（水平偏移）
• 5px（垂直偏移）
• 10px（模糊半径）
• rgba(0, 0, 0, 0.5)（颜色，半透明黑色）

---

（5）内边距 & 外边距

.box {
  padding: 20px; /* 内边距 */
  margin: 30px;  /* 外边距 */
}

• padding 控制内容与边框的距离
• margin 控制元素与其他元素的距离

---

总结

属性	作用
background-color	设置背景颜色
background-image	设置背景图片
background-repeat	设置背景是否重复
background-size	控制背景图片大小
background-position	控制背景图片位置
background-attachment	背景是否固定
border	设置边框
border-radius	设置边框圆角
box-shadow	设置阴影