盒子阴影 CSS 过渡

CSS 过渡 (CSS Transitions) 是一种使元素在 CSS 属性发生变化时产生平滑过渡效果的技术。同时，我们可以通过 CSS 盒子阴影效果 (Box Shadow) 为元素增添更多的视觉效果。

盒子阴影

CSS 盒子阴影可以为元素增加一个阴影效果。其代码如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，各个参数的含义分别为：

• h-shadow：必需，水平方向的阴影位置，可以为负值。如 box-shadow: 2px 2px 表示向右下方移动 2 个像素。
• v-shadow：必需，垂直方向的阴影位置，可以为负值。如 box-shadow: 2px 2px 表示向右下方移动 2 个像素。
• blur：可选，模糊距离。默认为 0，表示无模糊。模糊值越大，阴影的边缘就越模糊。
• spread：可选，阴影的尺寸。正值表示阴影扩散，负值表示收缩。默认为 0，表示阴影与元素一样大。
• color：可选，阴影的颜色。默认为黑色。
• inset：可选，是否把阴影改为内阴影。默认为外阴影。

示例代码：

.shadow {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

过渡

CSS 过渡通常需要与伪类 :hover 或 JavaScript 配合使用，以响应用户的交互操作。

示例代码：

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.2s ease-in-out;
}

.btn:hover {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

在上面的例子中，当鼠标移到 .btn 元素上时，box-shadow 属性会从原来的 0 变为右下角阴影。在 transition 属性中，我们设置 box-shadow 的过渡时间为 0.2s，过渡效果为 ease-in-out。这意味着阴影效果会从快到慢地变化。