CSS 背景和边框属性

简介

CSS 提供了广泛的属性来设置背景和边框样式，让你能够创建视觉吸引力强的设计。在本章中，我们将探索 CSS3 中可用的各种背景和边框属性，包括渐变、多重背景和边框图像等高级技术。

核心知识点

背景属性

1. 基本背景属性

background-color：设置元素的背景颜色
background-image：为元素设置一个或多个背景图像
background-repeat：指定背景图像的重复方式
background-position：设置背景图像的起始位置
background-size：指定背景图像的大小
background-attachment：指定背景图像是随页面滚动还是固定

2. 多重背景

CSS3 允许你为单个元素指定多个背景图像，用逗号分隔。

3. 背景渐变

线性渐变：创建沿直线过渡的渐变
径向渐变：创建从中心点过渡的渐变
重复渐变：创建重复的渐变图案

边框属性

1. 基本边框属性

border-width：设置元素边框的宽度
border-style：设置元素边框的样式
border-color：设置元素边框的颜色
border：设置所有边框属性的简写属性

2. 边框圆角

border-radius：为元素创建圆角
单个角属性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

3. 边框图像

border-image-source：指定用作边框的图像
border-image-slice：指定如何切片边框图像
border-image-width：指定边框图像的宽度
border-image-outset：指定边框图像超出边框盒子的量
border-image-repeat：指定边框图像的重复方式
border-image：设置所有边框图像属性的简写属性

4. 盒阴影

box-shadow：在元素框架周围添加阴影效果

实用示例

示例 1：基本背景样式

/* 基本背景颜色 */
.element {
  background-color: #f0f0f0;
  padding: 20px;
}

/* 背景图像 */
.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

示例 2：多重背景

.multiple-backgrounds {
  background-image: 
    url('pattern.png'),
    linear-gradient(to right, #ff9966, #ff5e62);
  background-repeat: repeat, no-repeat;
  background-size: 100px 100px, cover;
  padding: 40px;
  color: white;
}

示例 3：渐变背景

/* 线性渐变 */
.linear-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px;
  color: white;
}

/* 径向渐变 */
.radial-gradient {
  background: radial-gradient(circle, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
  padding: 40px;
  color: #333;
}

/* 重复渐变 */
.repeating-gradient {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
  padding: 40px;
  color: white;
}

示例 4：边框样式

/* 基本边框 */
.basic-border {
  border: 2px solid #3498db;
  padding: 20px;
  margin: 20px 0;
}

/* 圆角 */
.rounded-corners {
  border: 2px solid #e74c3c;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
}

/* 不同的角半径 */
.custom-corners {
  border: 2px solid #2ecc71;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 20px;
  margin: 20px 0;
}

示例 5：边框图像

.border-image {
  border: 10px solid transparent;
  padding: 20px;
  border-image: url('border.png') 30 round;
  margin: 20px 0;
}

/* 简写边框图像 */
.border-image-shorthand {
  border: 10px solid transparent;
  padding: 20px;
  border-image: url('border.png') 30 round;
  margin: 20px 0;
}

示例 6：盒阴影

/* 基本盒阴影 */
.basic-shadow {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
  padding: 20px;
  background-color: white;
  margin: 20px 0;
}

/* 多重盒阴影 */
.multiple-shadows {
  box-shadow: 
    0 4px 6px rgba(0,0,0,0.1),
    0 1px 3px rgba(0,0,0,0.08);
  padding: 20px;
  background-color: white;
  margin: 20px 0;
}

/* 内阴影 */
.inset-shadow {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
  background-color: #f8f9fa;
  margin: 20px 0;
}

动手练习

练习 1：创建带渐变背景和阴影的卡片

创建一个具有以下特征的卡片组件：

线性渐变背景
圆角
微妙的盒阴影
内边距和文本样式

练习 2：创建带悬停效果的按钮

创建一个具有以下特征的按钮：

实心边框
圆角
背景颜色
悬停效果，改变背景颜色、边框颜色并添加盒阴影

练习 3：创建带多重背景的部分

创建一个具有以下特征的部分：

背景图像
渐变叠加
在背景上可读的文本内容

总结

在本章中，我们探索了 CSS3 中可用的各种背景和边框属性。我们涵盖了：

基本背景属性，如 background-color、background-image 和 background-position
高级背景技术，包括多重背景和渐变
基本边框属性和用于创建圆角的边框半径
用于创建自定义边框样式的边框图像
用于为元素添加深度的盒阴影

这些属性提供了强大的工具来创建视觉吸引力强的设计。通过组合这些技术，你可以创建复杂而吸引人的视觉效果，而无需额外的图像或图形软件。

复习问题

background-size: cover 和 background-size: contain 的区别是什么？
如何为元素指定多个背景图像？
CSS3 中可用的渐变类型有哪些？
如何创建带圆角的元素？
border 简写属性包含哪些属性？
如何为元素创建盒阴影？
创建线性渐变的语法是什么？
如何创建边框图像？