css盒子图片添加阴影

今天我们来学习一下如何通过css来给盒子图片添加阴影效果。 首先，我们需要为图片所在的盒子设置一些基础样式，在这里我们使用一个宽高为200px，边框为1px、灰色的盒子作为示例。

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
 

接下来，我们可以使用 box-shadow 属性来为盒子添加阴影。该属性接受多个参数，分别为水平偏移量、垂直偏移量、模糊半径、阴影大小和阴影颜色。

.box {
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}
 

上面这行代码表示为盒子添加了一个水平偏移量为2px、垂直偏移量为2px、模糊半径为5px、大小为0px、颜色为rgba(0,0,0,0.75)的阴影效果。 如果我们希望给盒子添加两个阴影效果，可以在 box-shadow 属性中使用逗号分隔开不同的阴影效果。

.box {
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75), -2px -2px 5px 0px rgba(0,0,0,0.75);
}
 

在上面的代码中，我们为盒子添加了两个阴影效果，分别位于盒子的右下角和左上角。 除了 box-shadow 属性，我们还可以使用 text-shadow 属性为文本添加阴影效果。

p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.75);
}
 

上面这行代码表示为所有的 p 标签中的文本添加了一个水平偏移量为1px、垂直偏移量为1px、模糊半径为2px、颜色为rgba(0,0,0,0.75)的阴影效果。 通过以上的代码示例，我们可以掌握如何使用 css 为盒子图片添加阴影效果，为视觉效果增加更多的层次感和立体感。