CSS3如何实现阴影效果

在CSS3中，可以使用box-shadow属性来实现阴影效果。box-shadow属性可以为元素添加一个或多个阴影，每个阴影由水平偏移、垂直偏移、模糊半径、扩展半径和颜色组成。

以下是box-shadow属性的基本语法：

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

• horizontal offset（水平偏移）：阴影相对于元素的水平偏移量，正值表示阴影向右偏移，负值表示阴影向左偏移。
• vertical offset（垂直偏移）：阴影相对于元素的垂直偏移量，正值表示阴影向下偏移，负值表示阴影向上偏移。
• blur radius（模糊半径）：阴影的模糊程度，值越大，阴影越模糊。默认值为0，表示无模糊效果。
• spread radius（扩展半径）：阴影的扩展程度，正值表示阴影向外扩展，负值表示阴影向内收缩。默认值为0，表示无扩展效果。
• color（颜色）：阴影的颜色，可以使用颜色名称、十六进制颜色码、RGB或RGBA颜色值。

以下是一个简单的示例：

.box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

在这个示例中，.box元素将具有一个向右下方偏移5px的阴影，模糊半径为10px，颜色为半透明的黑色（透明度为0.5）。

如果需要添加多个阴影，可以用逗号分隔每个阴影的参数：

.box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.5);
}

在这个示例中，.box元素将具有两个阴影，一个向右下方偏移5px，另一个向左上方偏移5px。