使用 CSS 创建 Box Shadows

介绍

在本实验中，你将探索强大的 CSS box-shadow 属性，并学习如何为网页元素创建视觉上吸引人的阴影效果。通过逐步学习，你将理解阴影的基本语法，应用基础和高级的阴影技术，并发现如何自定义阴影属性以增强 HTML 元素的深度和视觉吸引力。

本实验涵盖的关键概念包括理解阴影语法、将阴影应用于不同形状、尝试偏移、模糊半径和颜色变化。通过本实验的学习，你将掌握创建专业外观阴影的实用技能，这些技能可以改变网页设计的视觉呈现，为你的用户界面增添微妙的深度和立体感。

理解 Box Shadow 语法

在这一步中，你将学习 CSS 阴影的基本语法，以及它们如何为网页元素增添深度和视觉吸引力。box-shadow 属性是一个强大的 CSS 功能，允许你为 HTML 元素创建阴影效果。

让我们从创建一个新的 HTML 文件开始，来探索阴影语法。打开 WebIDE，在 ~/project 目录下创建一个名为 index.html 的文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Box Shadow Syntax</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        /* Basic box-shadow syntax */
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

让我们分解一下 box-shadow 的语法：

5px：水平偏移（将阴影向右移动）
5px：垂直偏移（将阴影向下移动）
10px：模糊半径（使阴影边缘变柔和）
rgba(0, 0, 0, 0.3)：带有透明度的阴影颜色

基本语法为：box-shadow: [水平偏移] [垂直偏移] [模糊半径] [颜色]

渲染后的带阴影的盒子示例输出：

+------------------------+
|                        |
|    [Gray Box with     |
|     Soft Shadow]      |
|                        |
+------------------------+

需要记住的关键点：

正偏移值将阴影向右和向下移动
负偏移值将阴影向左和向上移动
模糊半径使阴影边缘变柔和
你可以使用颜色名称、十六进制、RGB 或 RGBA 值

为 Div 应用基础 Box Shadow

在这一步中，你将学习如何为 div 元素应用基础的 box shadow，并基于上一步学到的语法进行扩展。我们将修改现有的 HTML 文件，以展示不同的阴影效果。

打开 WebIDE 中的 index.html 文件，并使用以下代码更新其内容：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Box Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
      }

      /* Light shadow */
      .light-shadow {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
      }

      /* Darker shadow */
      .dark-shadow {
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box light-shadow"></div>
      <div class="box dark-shadow"></div>
    </div>
  </body>
</html>

让我们分解一下阴影的应用：

我们创建了两个具有不同阴影强度的 div 元素
.light-shadow 使用了一个柔和的阴影，其参数为：
- 5px 水平偏移
- 5px 垂直偏移
- 10px 模糊半径
- 20% 不透明度的浅黑色
.dark-shadow 使用了一个更明显的阴影，其参数为：
- 10px 水平偏移
- 10px 垂直偏移
- 15px 模糊半径
- 50% 不透明度的深黑色

示例视觉效果：

+------------------------+------------------------+
|                        |                        |
|   [Light Shadow Box]   |   [Dark Shadow Box]    |
|                        |                        |
+------------------------+------------------------+

关键观察点：

增加偏移值会使阴影离元素更远
增加模糊半径会使阴影更柔和
调整不透明度会改变阴影的强度

自定义 Box Shadow 属性

在这一步中，你将探索 box shadow 的高级自定义选项，包括内阴影（inset shadow）、扩展半径（spread radius）和颜色变化。我们将更新 index.html 文件以展示这些高级属性。

打开 WebIDE 中的 index.html 文件，并使用以下代码替换其内容：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Customized Box Shadows</title>
    <style>
      .container {
        display: flex;
        justify-content: space-around;
        padding: 50px;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 20px;
        background-color: #f0f0f0;
      }

      /* Inset shadow */
      .inset-shadow {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
      }

      /* Spread radius */
      .spread-shadow {
        box-shadow: 5px 5px 0 10px rgba(0, 0, 255, 0.2);
      }

      /* Colored shadow */
      .colored-shadow {
        box-shadow: 8px 8px 12px rgba(255, 0, 0, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box inset-shadow"></div>
      <div class="box spread-shadow"></div>
      <div class="box colored-shadow"></div>
    </div>
  </body>
</html>

让我们探索这些新的 box shadow 自定义选项：

内阴影（Inset Shadow）：
- 使用 inset 关键字创建内部阴影
- 使元素看起来像是被按下或凹陷
- 语法：box-shadow: inset [水平偏移] [垂直偏移] [模糊半径] [颜色]
扩展半径（Spread Radius）：
- 添加一个额外的值来扩展阴影
- 第四个数值控制阴影的扩展
- 在示例中，10px 的扩展创建了一个带有蓝色调的阴影边框
彩色阴影（Colored Shadow）：
- 使用 RGBA 创建带有透明度的彩色阴影
- 示例使用了一个红色阴影，透明度为 40%

示例视觉效果：

+------------------------+------------------------+------------------------+
|                        |                        |                        |
| [Inset Shadow Box]     | [Spread Shadow Box]    | [Colored Shadow Box]   |
|                        |                        |                        |
+------------------------+------------------------+------------------------+

关键点：

inset 创建内部阴影
扩展半径用于扩展阴影
使用 RGBA 创建带有透明度的彩色阴影

创建带阴影的圆形元素

在这一步中，你将学习如何使用 CSS 的 border-radius 和 box-shadow 属性创建一个带阴影的圆形元素。打开 WebIDE 中的 index.html 文件，并使用以下代码更新其内容：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Circular Element with Shadow</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }

      .circular-element {
        width: 200px;
        height: 200px;
        background-color: #ffffff;

        /* Create circular shape */
        border-radius: 50%;

        /* Add box shadow */
        box-shadow:
          0 10px 20px rgba(0, 0, 0, 0.2),
          0 6px 6px rgba(0, 0, 0, 0.15);

        /* Center content */
        display: flex;
        justify-content: center;
        align-items: center;

        /* Optional: add text */
        font-family: Arial, sans-serif;
        color: #333;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="circular-element">Circular Shadow</div>
    </div>
  </body>
</html>

创建带阴影的圆形元素的关键技术：

圆形形状：
- 使用 border-radius: 50% 创建一个完美的圆形
- 确保宽度和高度相等
阴影效果：
- 第一个阴影：0 10px 20px rgba(0, 0, 0, 0.2)
  - 垂直偏移 10px
  - 模糊半径 20px
  - 20% 不透明度的柔和黑色
- 第二个阴影：0 6px 6px rgba(0, 0, 0, 0.15)
  - 添加一个更近、更柔和的阴影以增加深度

示例视觉效果：

+------------------------+
|                        |
|    [Circular Element   |
|     with Soft Shadow]  |
|                        |
+------------------------+

关键点：

border-radius: 50% 创建一个完美的圆形
多个阴影可以增加深度
调整不透明度和模糊效果以达到理想效果

尝试多种阴影效果

在这一步中，你将探索使用多重 box shadow 创建复杂阴影效果的高级技巧。打开 WebIDE 中的 index.html 文件，并使用以下代码更新其内容：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Shadow Effects</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
      }

      .card {
        width: 300px;
        height: 400px;
        background-color: white;
        border-radius: 10px;

        /* Multiple shadow effect */
        box-shadow: 
                /* Outer shadow */
          0 10px 20px rgba(0, 0, 0, 0.1),
          /* Inner shadow */ inset 0 -5px 10px rgba(0, 0, 0, 0.05),
          /* Colored accent shadow */ 0 15px 25px rgba(0, 123, 255, 0.2);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        transition: transform 0.3s ease;
      }

      .card:hover {
        transform: scale(1.05);
        box-shadow:
          0 15px 30px rgba(0, 0, 0, 0.2),
          inset 0 -5px 10px rgba(0, 0, 0, 0.1),
          0 20px 35px rgba(0, 123, 255, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>Shadow Experiment</h2>
      <p>Hover to see shadow effect!</p>
    </div>
  </body>
</html>

多重阴影效果的关键技术：

分层阴影：
- 第一个阴影：外部柔和阴影
- 第二个阴影：内部细微阴影
- 第三个阴影：彩色强调阴影
阴影组合：
- 0 10px 20px rgba(0, 0, 0, 0.1)：外部柔和阴影
- inset 0 -5px 10px rgba(0, 0, 0, 0.05)：内部细微阴影
- 0 15px 25px rgba(0, 123, 255, 0.2)：蓝色强调阴影
悬停效果：
- 悬停时增加阴影强度
- 添加缩放变换以增强交互感

示例视觉效果：

+------------------------+
|                        |
|   [Card with Complex   |
|    Shadow Effects]     |
|                        |
+------------------------+

关键点：

结合多重阴影以增加深度
使用 inset 创建内部阴影
通过悬停创建交互效果

总结

在本实验中，参与者探索了强大的 CSS box-shadow 属性，为网页元素创建视觉上吸引人的深度和维度。通过学习 box shadow 的基本语法，学生掌握了如何使用水平和垂直偏移、模糊半径以及颜色参数来应用阴影效果，从而提升 HTML 元素的视觉设计。

实验通过一系列实践练习引导学习者，包括创建基础 box shadow、自定义阴影属性以及实验多重阴影效果。参与者将获得实际操作经验，掌握如何调整阴影特性，如偏移方向、模糊强度和颜色透明度，这些技巧可以显著提升网页组件的美观性和视觉层次感。