核心概念：box-shadow 属性

为 HTML 元素的背景添加阴影，我们使用的是 CSS 的 box-shadow 属性，这个属性可以为任何块级或行内块级元素（如 <div>, <p>, <img> 等）添加阴影效果。

html如何给背景加阴影教程
（图片来源网络，侵删）

基本语法：

box-shadow: h-offset v-offset [blur-radius] [spread-radius] [color] [inset];

让我们逐一分解这些参数：

  1. h-offset (水平偏移): 阴影在水平方向上的位置。

    • 正值: 阴影在元素的右侧。
    • 负值: 阴影在元素的左侧。
    • 0: 阴影在正下方。

  2. v-offset (垂直偏移): 阴影在垂直方向上的位置。

    html如何给背景加阴影教程
    （图片来源网络，侵删）
    • 正值: 阴影在元素的下方。
    • 负值: 阴影在元素的上方。
    • 0: 阴影在正下方。

  3. blur-radius (模糊半径): 阴影的模糊程度。

    • 值越大，阴影越模糊、范围越大。
    • 值为 0 或省略时，阴影边缘是锐利的。
    • 这个参数是可选的。

  4. spread-radius (扩展半径): 阴影的大小。

    • 正值: 阴影会扩大，超出元素本身。
    • 负值: 阴影会收缩，小于元素本身。
    • 值为 0 或省略时，阴影大小与元素相同。
    • 这个参数是可选的。

  5. color (颜色): 阴影的颜色。

    • 可以是任何有效的 CSS 颜色值，如 #000000, rgba(0, 0, 0, 0.5), black 等。
    • 使用 rgba 或 hsla 并设置透明度（alpha）是创建柔和阴影的常用技巧。
    • 这个参数是可选的,默认是文字颜色。

  6. inset (内阴影): 这是一个关键字。

    html如何给背景加阴影教程
    （图片来源网络，侵删）
    • 如果写了 inset，阴影会显示在元素内部，而不是外部。
    • 如果省略（默认情况），阴影显示在元素外部。
    • 这个参数是可选的。

教程：实战演练

下面我们通过几个具体的例子来学习如何使用 box-shadow。

示例 1：基础卡片阴影（最常用）

这是网页设计中非常经典的“卡片”效果，让内容看起来有层次感。

HTML 结构:

<div class="card">
  <h2>卡片标题</h2>
  <p>这是一张带有经典阴影效果的卡片，这种效果通过 box-shadow 轻松实现。</p>
</div>

CSS 代码:

.card {
  width: 300px;
  padding: 20px;
  background-color: #ffffff; /* 卡片背景色 */
  /* 核心阴影代码 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 让卡片更美观 */
  border-radius: 8px;
  font-family: sans-serif;
}
.card h2 {
  margin-top: 0;
  color: #333;
}

代码解析:

  • 0 4px: 阴影在水平方向不偏移，在垂直方向向下偏移 4 像素。
  • 8px: 模糊半径为 8 像素，让阴影边缘柔和。
  • rgba(0, 0, 0, 0.1): 阴影颜色为黑色，但透明度只有 10%，非常柔和。

效果：

示例 2：悬浮和点击效果（增强交互感）

我们可以通过改变阴影来模拟按钮或卡片的悬浮和点击状态。

HTML 结构:

<button class="btn-hover">悬浮我</button>

CSS 代码:

.btn-hover {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  /* 初始状态，较轻的阴影 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* 平滑过渡效果 */
  transition: box-shadow 0.3s ease-in-out;
}
/* 鼠标悬浮时的效果 */
.btn-hover:hover {
  /* 阴影变大、变模糊，颜色更深 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
/* 鼠标点击时的效果 */
.btn-hover:active {
  /* 阴影变小，模拟被按下的感觉 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(1px); /* 可选：轻微下移 */
}

代码解析:

  • transition: 让阴影的变化过程变得平滑，而不是瞬间完成。
  • hover: 当鼠标移到按钮上时，增加阴影的模糊度和大小。
  • active: 当鼠标点击按钮时，减小阴影，模拟按钮被按下的视觉效果。

示例 3：多层阴影（创造更丰富的效果）

你可以用逗号 分隔，为一个元素添加多个阴影，创造出更复杂、更立体的效果。

HTML 结构:

<div class="multi-shadow-box">
  <h3>多层阴影效果</h3>
</div>

CSS 代码:

.multi-shadow-box {
  width: 250px;
  height: 150px;
  padding: 20px;
  background-color: #f0f0f0;
  /* 用逗号分隔多个阴影 */
  box-shadow: 
    0 0 10px #ff0000,     /* 第一层：红色发光效果 */
    0 0 20px #ff0000,     /* 第二层：更宽的红色发光 */
    0 4px 6px rgba(0, 0, 0, 0.1); /* 第三层：经典的投影 */
  border-radius: 8px;
  text-align: center;
  line-height: 150px;
}

代码解析:

  • 从上到下依次渲染阴影,后面的阴影会覆盖在先前的阴影之上。
  • 这个例子创造了一个“霓虹灯”效果加经典投影的组合。

示例 4：内阴影（inset 效果）

inset 关键字可以将阴影应用到元素内部。

HTML 结构:

<div class="inset-shadow-box">
  这是一个带有内阴影的盒子。
</div>

CSS 代码:

.inset-shadow-box {
  width: 300px;
  padding: 30px;
  background-color: #4a90e2;
  /* 使用 inset 关键字 */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 18px;
  text-align: center;
  border-radius: 5px;
}

效果： 阴影看起来像是画在盒子内部的凹陷区域。

高级技巧与最佳实践

为整个页面背景添加阴影

box-shadow 只能作用于元素本身，不能直接为整个 <body> 或 <html> 的“背景”添加阴影，但有一个非常巧妙的变通方法：

原理： 创建一个覆盖全屏的伪元素（:before 或 :after），然后为这个伪元素添加阴影。

CSS 代码:

body {
  margin: 0; /* 移除默认边距 */
  min-height: 100vh; /* 确保body至少和视口一样高 */
  background-color: #f5f5f5; /* 页面背景色 */
  position: relative; /* 为伪元素定位提供参考 */
}
/* 创建一个覆盖全屏的伪元素 */
body::before {
  content: ''; /* 伪元素必须有content */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 将其置于页面内容的后面 */
  /* 为这个“背景层”添加阴影 */
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.1);
}

解析:

  • position: relative 在 body 上是必要的。
  • :before 伪元素通过 position: absolute 和 top/left: 0 覆盖整个屏幕。
  • z-index: -1 是关键，它确保阴影在内容的“后面”，看起来就像页面背景的阴影。
  • 这里使用了 inset，所以阴影是向内收缩的，创造出一种页面被“笼罩”的感觉，如果想要向外的阴影，可以去掉 inset，但效果可能会被页面内容遮挡。

阴影性能优化

  • 避免模糊半径过大: blur-radius 值过大会增加浏览器的渲染负担，尤其是在动画中。
  • 使用 transform 和 opacity 进行动画: 如果需要让阴影动起来（例如悬浮时放大），最好使用 transform: scale() 和 opacity，而不是直接改变 box-shadow 的值，因为前者的性能要好得多。
需求 解决方案 示例
为单个元素（如卡片）添加阴影 使用 box-shadow 属性 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
创建悬浮/点击效果 结合 hover 和 active 伪类，并使用 transition button:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.3); }
创建复杂的立体效果 使用逗号 添加多个阴影 box-shadow: 0 0 10px #ff0, 0 4px 6px rgba(0,0,0,0.1);
创建凹陷/内嵌效果 使用 inset 关键字 box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
为整个页面背景添加阴影 为 body 创建一个覆盖全屏的 :before 伪元素，并为其添加 box-shadow body::before { box-shadow: inset 0 0 100px rgba(0,0,0,0.1); }

掌握 box-shadow 是前端开发中一项非常重要的技能，希望这个详细的教程能帮助你轻松地为你的网页添加漂亮的阴影效果！