多个框阴影 CSS

在网页设计中，框阴影是一种常见的效果，可以给页面增加深度和层次感。在本文中，我们将介绍如何使用 CSS 创造多个框阴影效果。

单个框阴影

首先，我们介绍创建单个框阴影的方法。以下是一个示例：

.shadow {
  box-shadow: 2px 2px 10px #888888;
}

这个样式将会给所有具有 shadow 类的元素添加一个向右下方偏移 2 像素、模糊半径为 10 像素、颜色为 #888888 的阴影。

多个框阴影

如果你想要添加多个框阴影效果，CSS 也是可以实现的。以下是一个示例：

.shadow {
  box-shadow: 2px 2px 10px #888888,
    -2px -2px 10px #888888,
    -2px 2px 10px #888888,
    2px -2px 10px #888888;
}

这个例子中，我们使用了多个 box-shadow 属性，用逗号分隔。每个 box-shadow 属性代表一个框阴影。在这个样式中，我们创建了四个框阴影效果，其中两个框阴影向左上角、一个向右上角，一个向左下角。

演示

您可以尝试在这个 CodePen 链接中查看多个框阴影的效果：https://codepen.io/pigjade/pen/jQgRER

总结

使用 CSS，您可以轻松地创建多个框阴影效果，为您的网页设计增加深度和层次感。使用多个 box-shadow 属性，您可以将不同的阴影效果组合在一起，形成更加复杂的效果。