4. CSS 背景和边框

CSS 提供了背景和边框属性，用于设置网页元素的背景颜色、图片、渐变、边框样式等。这些属性是网页设计中非常重要的一部分。

1. 背景属性

背景属性用于设置元素的背景效果。常见的背景属性包括 background-color、background-image、background-repeat、background-position、background-size 等。

1.1 常见背景属性

1.1.1 背景颜色（background-color）

用于设置元素的背景颜色。

div {
  background-color: lightblue;
}

效果：将元素的背景设置为浅蓝色。

1.1.2 背景图片（background-image）

用于为元素设置背景图片。

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

效果：将 background.jpg 设置为背景图片。

1.1.3 背景图片重复（background-repeat）

用于控制背景图片是否重复。

• repeat：默认值，水平和垂直方向都重复。
• repeat-x：仅在水平方向重复。
• repeat-y：仅在垂直方向重复。
• no-repeat：不重复。

div {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

效果：背景图片只显示一次，不重复。

1.1.4 背景图片位置（background-position）

用于设置背景图片的位置。

• 值：left、center、right 或 top、center、bottom，也可以通过像素或百分比指定位置，例如 10px 20px。

div {
  background-image: url('background.jpg');
  background-position: center center; /* 水平和垂直居中 */
}

效果：将背景图片居中显示。

1.1.5 背景图片大小（background-size）

用于定义背景图片的显示大小。

• auto：保持图片的原始大小。
• cover：图片缩放以完全覆盖元素背景区域。
• contain：图片缩放以完全适应元素背景区域，但不会裁剪图片。
• 或者使用像素值或百分比定义宽高。

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

效果：背景图片会缩放以覆盖整个背景区域。

1.1.6 背景图片固定/滚动（background-attachment）

• scroll：背景图片随页面滚动（默认值）。
• fixed：背景图片固定在视口，不随页面滚动。
• local：背景图片随元素内容滚动。

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

效果：背景图片固定，不会随页面滚动。

1.1.7 背景的综合写法（background）

background 属性是设置背景相关样式的简写形式，可以同时设置颜色、图片、重复方式、位置等。

语法：

background: [color] [image] [position] / [size] [repeat] [attachment];

示例：

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

效果：背景设置为浅蓝色，并添加 background.jpg 图片，居中显示，大小为覆盖模式且固定。

2. 边框属性

边框属性用于为元素的四周添加边框，可以设置边框的宽度、类型、颜色以及圆角等。

2.1 常见边框属性

2.1.1 边框宽度（border-width）

用于设置边框的宽度。

• 值：thin、medium、thick 或具体数值（如像素）。

div {
  border-width: 5px;
}

效果：设置边框的宽度为 5 像素。

2.1.2 边框样式（border-style）

用于设置边框的样式。

• 值：

  • none：无边框。
  • solid：实线边框。
  • dashed：虚线边框。
  • dotted：点状边框。
  • double：双实线边框。
  • groove：凹槽效果边框。
  • ridge：凸起效果边框。
  • inset：内嵌效果边框。
  • outset：外凸效果边框。

div {
  border-style: dashed;
}

效果：设置虚线样式的边框。

2.1.3 边框颜色（border-color）

用于设置边框的颜色。

div {
  border-color: red;
}

效果：将边框的颜色设置为红色。

2.1.4 边框的综合写法（border）

border 属性是设置边框宽度、样式和颜色的简写形式。

语法：

border: [border-width] [border-style] [border-color];

示例：

div {
  border: 2px solid blue;
}

效果：设置边框为 2 像素宽的蓝色实线。

2.2 单独设置边框

可以针对单个方向设置边框，例如 border-top、border-right、border-bottom 和 border-left。

div {
  border-top: 2px solid red;
  border-right: 5px dashed blue;
}

效果：设置顶部为红色实线边框，右侧为蓝色虚线边框。

2.3 圆角边框（border-radius）

• border-radius 用于设置边框的圆角。
• 值：可以是像素或百分比，百分比是相对于元素尺寸计算的。

示例 1：设置圆角效果

div {
  border: 2px solid black;
  border-radius: 10px;
}

效果：为边框添加 10 像素的圆角。

示例 2：设置圆形效果

div {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50%;
}

效果：将正方形元素设置为圆形。

2.4 边框图片（border-image）

• border-image 属性允许使用图片作为边框。

• 语法：

  border-image: url('border.png') 30 round;

  • url()：边框图片的路径。
  • 数值：用于定义图片分割的区域。
  • stretch、repeat 或 round：定义图片如何填充边框。

示例：

div {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round;
}

效果：使用 border.png 图片生成边框。

3. 背景和边框的结合使用

背景和边框可以结合使用，创建更加丰富的样式效果。

示例：卡片效果

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  border: 5px solid #fff;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

效果：创建一个带有渐变背景、白色圆角边框和阴影的卡片。

4. 小结

CSS 背景和边框属性为网页设计提供了极大的灵活性和表现力。以下是总结：

• 背景属性 主要用于控制颜色、图片、渐变、位置、大小和滚动等。
• 边框属性 用于设置边框的宽度、样式、颜色、圆角以及图片边框。
• 使用简写形式可以让代码更简洁（比如 background 和 border）。
• 背景和边框可以配合使用，创造丰富的视觉效果。

通过熟练使用这些属性，你可以设计出更加美观和复杂的网页元素！