CSS 如何制作多个阴影

在本文中，我们将介绍如何使用 CSS 制作多个阴影效果，并提供一些示例说明。

阅读更多：CSS 教程

使用 CSS box-shadow 属性制作单个阴影

首先，让我们来回顾一下如何使用 CSS 的 box-shadow 属性来制作单个阴影。box-shadow 属性允许我们在元素的背后添加一个或多个阴影效果。

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

在上面的示例中，我们通过 box-shadow 属性添加了一个水平偏移量为 2 像素、垂直偏移量为 2 像素、模糊半径为 5 像素、颜色为半透明黑色的阴影效果。

添加多个阴影

要制作多个阴影效果，我们只需在 box-shadow 属性中使用逗号分隔每个阴影值。

.multiple-shadows {
  box-shadow: 
    2px 2px 5px rgba(0, 0, 0, 0.5),
    -2px -2px 5px rgba(255, 0, 0, 0.5),
    2px -2px 5px rgba(0, 255, 0, 0.5),
    -2px 2px 5px rgba(0, 0, 255, 0.5);
}

在上述示例中，我们添加了四个不同的阴影效果。分别是右下方向的黑色阴影，左上方向的红色阴影，右上方向的绿色阴影和左下方向的蓝色阴影。

设置多个阴影的顺序

默认情况下，使用 box-shadow 属性添加的第一个阴影位于最上层，后续的阴影会覆盖在前面的阴影上。我们可以使用 inset 关键字来使阴影位于背景内部而不是背景外部。

.order-of-shadows {
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.5),
    inset -2px -2px 5px rgba(255, 0, 0, 0.5),
    inset 2px -2px 5px rgba(0, 255, 0, 0.5),
    -2px 2px 5px rgba(0, 0, 255, 0.5);
}

在上面的示例中，通过在第二个和第三个阴影值前添加 inset 关键字，我们将这些阴影效果放置在了元素的内部。

控制阴影的叠加效果

我们还可以使用不同的阴影颜色、模糊半径和偏移量来创建各种各样的叠加效果。

.overlay-shadows {
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.5),
    4px 4px 10px rgba(0, 0, 0, 0.3),
    6px 6px 15px rgba(0, 0, 0, 0.2);
}

在上述示例中，我们使用了三个不同的阴影效果，每个阴影的模糊半径和偏移量都有所增加，从而创建了一种视觉上的叠加效果。

总结

在本文中，我们介绍了如何使用 CSS 制作多个阴影效果。通过对 box-shadow 属性的多个值的使用，我们可以轻松地创建多个阴影效果，并通过调整顺序、颜色、模糊和偏移量来控制阴影的叠加效果。希望本文能对你理解和运用 CSS 的阴影效果有所帮助。