css如何给盒子底部加阴影,CSS3 --添加阴影（盒子阴影、文本阴影的使用）

在CSS中，可以使用box-shadow属性给盒子底部添加阴影。这个属性允许你设置水平阴影的位置、垂直阴影的位置、阴影的模糊半径、阴影的大小和阴影的颜色。

以下是一个示例，展示如何给一个盒子的底部添加阴影：

/* CSS3 盒子阴影 */
.box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  /* 水平偏移 0, 垂直偏移 10px, 模糊半径 15px, 阴影颜色为黑色 */
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5);
}
 
/* CSS3 文本阴影 */
.text-shadow {
  font-size: 30px;
  color: #333;
  /* 水平偏移 2px, 垂直偏移 2px, 模糊半径 5px, 阴影颜色为灰色 */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

HTML部分：

<div class="box"></div>
<div class="text-shadow">带阴影的文本</div>

在上面的代码中，.box类给盒子添加了阴影，.text-shadow类给文本添加了阴影。box-shadow和text-shadow的参数顺序通常是这样的：

1. 水平偏移（必需）
2. 垂直偏移（必需）
3. 模糊半径（可选）
4. 阴影颜色（可选）

在box-shadow中，如果不设置模糊半径，阴影将是完全的像素化边缘。在text-shadow中，如果不设置模糊半径和颜色，阴影颜色默认为文本颜色，并且不会有模糊效果。