CSS3 盒模型 - box-shadow 属性

核心知识点

box-shadow 属性的语法和用法
box-shadow 属性的取值范围
box-shadow 属性的实际应用场景
box-shadow 属性的高级用法

学习目标

理解 box-shadow 属性的基本概念和作用
掌握 box-shadow 属性的语法和取值规则
能够使用 box-shadow 属性创建各种阴影效果
了解 box-shadow 属性的高级用法和技巧

什么是 box-shadow 属性？

box-shadow 属性是 CSS3 中用于为元素添加阴影效果的属性。通过 box-shadow 属性，您可以为元素创建外阴影或内阴影，从而增加元素的立体感和深度，提升页面的视觉效果。

box-shadow 属性的语法

/* 基本语法 */
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> <inset>;

/* 多重阴影 */
box-shadow: 
  <shadow1>,
  <shadow2>,
  ...
  <shadowN>;

其中：

<offset-x>: 阴影在水平方向的偏移量，正值向右，负值向左
<offset-y>: 阴影在垂直方向的偏移量，正值向下，负值向上
<blur-radius>: 阴影的模糊半径，值越大阴影越模糊
<spread-radius>: 阴影的扩散半径，正值阴影扩大，负值阴影缩小
<color>: 阴影的颜色
<inset>: 可选，设置为内阴影（默认是外阴影）

box-shadow 属性的取值范围

偏移量 (offset-x, offset-y)

长度值：如 2px、-3px、1em 等
可以是正数、负数或零

模糊半径 (blur-radius)

长度值：如 2px、4px、8px 等
必须是非负数
值越大，阴影边缘越模糊

扩散半径 (spread-radius)

长度值：如 1px、-2px、0.5em 等
可以是正数、负数或零
正值：阴影扩大
负值：阴影缩小

颜色 (color)

颜色名称：如 black、gray、rgba(0, 0, 0, 0.5) 等
十六进制值：如 #000、#333、#666 等
RGB 值：如 rgb(0, 0, 0)、rgb(51, 51, 51) 等
RGBA 值：如 rgba(0, 0, 0, 0.5)、rgba(51, 51, 51, 0.3) 等

内阴影 (inset)

inset: 设置为内阴影
不设置：默认为外阴影

box-shadow 属性的实际应用

示例 1：基本阴影效果

/* 基本外阴影 */
basic-shadow {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 带有扩散半径的阴影 */
spread-shadow {
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3);
}

/* 内阴影 */
inset-shadow {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 左侧阴影 */
left-shadow {
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
}

/* 顶部阴影 */
top-shadow {
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
}

示例 2：多重阴影效果

/* 双层阴影 */
double-shadow {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 彩色多重阴影 */
colorful-shadow {
  box-shadow: 
    2px 2px 4px rgba(255, 0, 0, 0.3),
    -2px -2px 4px rgba(0, 255, 0, 0.3),
    0 0 8px rgba(0, 0, 255, 0.3);
}

/* 内阴影与外阴影结合 */
combined-shadow {
  box-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.3),
    inset 2px 2px 4px rgba(255, 255, 255, 0.5);
}

示例 3：高级阴影效果

/* 立体感按钮 */
3d-button {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

3d-button:hover {
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* 卡片阴影 */
card-shadow {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

card-shadow:hover {
  box-shadow: 
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
}

/* 凹陷效果 */
depressed {
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 凸起效果 */
elevated {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

box-shadow 属性的实际应用场景

1. 卡片设计

使用 box-shadow 为卡片添加阴影，增加层次感和深度，使卡片看起来悬浮在页面之上。

2. 按钮效果

使用 box-shadow 为按钮添加阴影，创建立体感，并在 hover 时改变阴影效果，提供交互反馈。

3. 导航栏

使用 box-shadow 为导航栏添加底部阴影，使其与页面内容区分开，增加页面的层次感。

4. 图片效果

使用 box-shadow 为图片添加阴影，使图片看起来更加突出，增强视觉效果。

5. 表单元素

使用 box-shadow 为表单输入框添加内阴影，创建凹陷效果，提升用户体验。

实践练习

练习 1：创建不同类型的阴影效果

创建一个 HTML 页面，包含以下元素：

一个带有基本外阴影的元素
一个带有内阴影的元素
一个带有多重阴影的元素
一个带有彩色阴影的元素

练习 2：创建卡片阴影效果

创建一个 HTML 页面，包含一个带有卡片阴影效果的元素，例如：

卡片内容：包含标题和段落文本
卡片样式：带有适当的内边距和圆角
阴影效果：使用 box-shadow 创建自然的卡片阴影
交互效果：添加 hover 时的阴影变化

练习 3：创建按钮阴影效果

创建一个 HTML 页面，包含几个带有不同阴影效果的按钮，例如：

一个带有基本阴影的按钮
一个带有立体感的按钮
一个带有彩色阴影的按钮
所有按钮都添加 hover 时的交互效果

总结

本教程详细介绍了 CSS3 中的 box-shadow 属性，包括其语法、取值范围和实际应用。通过本教程的学习，您应该能够：

理解 box-shadow 属性的基本概念和作用
掌握 box-shadow 属性的语法和取值规则
能够使用 box-shadow 属性创建各种阴影效果
了解 box-shadow 属性的高级用法和技巧

box-shadow 属性是 CSS3 中用于为元素添加阴影效果的重要属性，它可以帮助您创建出具有立体感和深度的元素，提升页面的视觉效果。在实际开发中，您可以根据需要选择合适的阴影参数，创建出符合设计要求的阴影效果。