在HTML5中，使用CSS的box-shadow属性可以轻松地为元素添加阴影效果。这个属性允许你为元素设置一个或多个外阴影，从而创造出丰富的视觉效果。本文将详细介绍如何设置三个外阴影，并展示一些实用的例子。

一、box-shadow属性简介

box-shadow属性可以应用于任何拥有边框的HTML元素，如div、p、img等。它允许你设置阴影的水平偏移量、垂直偏移量、模糊半径、扩展半径以及阴影的颜色。

box-shadow的基本语法如下：

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

其中，h-shadow和v-shadow分别代表水平偏移量和垂直偏移量，可以是正数或负数。正数表示向右或向下偏移，负数表示向左或向上偏移。blur和spread分别代表模糊半径和扩展半径，它们决定了阴影的模糊程度和扩散程度。color代表阴影的颜色。

二、设置三个外阴影

要为元素设置三个外阴影，你可以将box-shadow属性重复三次，并用逗号分隔。以下是一个例子：

div {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  margin: 50px;
  box-shadow:
    10px 10px 5px 0px rgba(0, 0, 0, 0.5), /* 第一个外阴影 */
    20px 20px 10px 0px rgba(0, 0, 0, 0.4), /* 第二个外阴影 */
    30px 30px 15px 0px rgba(0, 0, 0, 0.3); /* 第三个外阴影 */
}

在上面的例子中，我们为div元素设置了三个外阴影，每个阴影都有不同的偏移量、模糊半径和扩展半径。

三、多重边框阴影技巧

  1. 使用不同颜色：通过设置不同的颜色，可以使阴影看起来更加丰富和立体。例如：
div {
  box-shadow:
    10px 10px 5px 0px rgba(0, 0, 0, 0.5),
    20px 20px 10px 0px rgba(255, 0, 0, 0.4),
    30px 30px 15px 0px rgba(0, 255, 0, 0.3);
}
  1. 使用多个模糊半径：通过设置多个模糊半径，可以使阴影的边缘更加柔和。例如：
div {
  box-shadow:
    10px 10px 5px 0px rgba(0, 0, 0, 0.5),
    20px 20px 10px 0px rgba(0, 0, 0, 0.4),
    30px 30px 20px 0px rgba(0, 0, 0, 0.3);
}
  1. 使用多个扩展半径：通过设置多个扩展半径，可以使阴影的扩散程度更大。例如：
div {
  box-shadow:
    10px 10px 5px 0px rgba(0, 0, 0, 0.5),
    20px 20px 10px 5px rgba(0, 0, 0, 0.4),
    30px 30px 15px 10px rgba(0, 0, 0, 0.3);
}

通过以上技巧，你可以轻松地创建出具有多重外阴影的元素，为网页增添丰富的视觉效果。