卡引导程序上悬停类的阴影 - CSS

在编写网站时，我们通常会使用引导程序来向用户展示重要的信息和操作。 在本文中，我们将探讨如何使用CSS在卡引导程序上悬停时添加阴影效果。

步骤1：HTML

首先，我们需要创建HTML标记，以便在网页上展示卡引导程序。请参考以下示例代码：

<div class="card">
  <h3>Card Title</h3>
  <p>Card Description</p>
</div>

步骤2：CSS

接下来我们需要添加CSS样式以为卡引导程序添加阴影效果。 我们将使用:hover伪类来添加悬停效果，并使用 box-shadow 属性添加阴影。 请参考以下示例代码：

.card {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  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:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

解释

在上述代码中，我们首先为卡引导程序定义基本样式。我们设置了宽度、高度和内边距，还添加了边框。接下来，我们使用 box-shadow 属性为卡引导程序添加阴影。

.box-shadow 支持传递多个参数，第一个参数是水平偏移量，第二个参数是垂直偏移量，第三个参数是模糊半径，第四个参数是阴影的颜色。我们在此使用了两个 box-shadow 属性，一个在hover时使用，一个在基本样式中使用。

在基本样式中，我们使用了较小的阴影，而在 hover 样式中，我们使用了较大和更具视觉影响力的阴影。

我们还通过使用 transition 属性来创建平滑过渡效果。

结论

完成上述步骤后，您的卡引导程序现在应该拥有一个非常酷的悬停阴影效果。 您可以通过更改 box-shadow 属性的值来自定义阴影的外观和颜色。

返回的markdown代码片段:

# 卡引导程序上悬停类的阴影 - CSS

在编写网站时，我们通常会使用引导程序来向用户展示重要的信息和操作。 在本文中，我们将探讨如何使用CSS在卡引导程序上悬停时添加阴影效果。

## 步骤1：HTML

首先，我们需要创建HTML标记，以便在网页上展示卡引导程序。请参考以下示例代码：

```html
<div class="card">
  <h3>Card Title</h3>
  <p>Card Description</p>
</div>

步骤2：CSS

接下来我们需要添加CSS样式以为卡引导程序添加阴影效果。 我们将使用:hover伪类来添加悬停效果，并使用 box-shadow 属性添加阴影。 请参考以下示例代码：

.card {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  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:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

解释

在上述代码中，我们首先为卡引导程序定义基本样式。我们设置了宽度、高度和内边距，还添加了边框。接下来，我们使用 box-shadow 属性为卡引导程序添加阴影。

.box-shadow 支持传递多个参数，第一个参数是水平偏移量，第二个参数是垂直偏移量，第三个参数是模糊半径，第四个参数是阴影的颜色。我们在此使用了两个 box-shadow 属性，一个在hover时使用，一个在基本样式中使用。

在基本样式中，我们使用了较小的阴影，而在 hover 样式中，我们使用了较大和更具视觉影响力的阴影。

我们还通过使用 transition 属性来创建平滑过渡效果。

结论

完成上述步骤后，您的卡引导程序现在应该拥有一个非常酷的悬停阴影效果。 您可以通过更改 box-shadow 属性的值来自定义阴影的外观和颜色。