CSS3阴影怎么添加

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

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

box-shadow: [水平偏移量] [垂直偏移量] [模糊半径] [扩展半径] [颜色];

示例：

/* 添加一个简单的阴影 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

在这个例子中，我们为.box元素添加了一个阴影，水平偏移量为5px，垂直偏移量为5px，模糊半径为10px，颜色为半透明的黑色（rgba(0, 0, 0, 0.5)）。

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

/* 添加多个阴影 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.5);
}

在这个例子中，我们为.box元素添加了两个阴影，一个在右下角，另一个在左上角。