css 图片下边框加阴影

CSS 是我们前端开发中使用频率非常高的技术，常被用于对网页样式进行定制。其中，通过 CSS 给图片添加下边框，并让下边框上阴影效果的需求也是比较常见的，那么今天就来介绍一下如何实现这个效果。

/*首先，定义图片边框*/
img {
   border-bottom: 2px solid #666;
}

/*接着，定义阴影效果*/
img {
  Box-shadow: 0px 2px 2px #888;
}

如上代码，我们首先给图片定义了一个下边框，宽度为 2 像素，颜色为 #666，这样就给图片添加了下边框。接下来，我们再通过 Box-shadow 属性定义阴影效果，其中，第一个参数是横向阴影偏移量，第二个参数是垂直阴影偏移量，第三个参数是阴影模糊半径，第四个参数是阴影颜色，这样就实现了阴影效果。

通过上述代码，我们可以将图片的下边框和阴影效果结合起来，达到了更加美观的效果，提升了网页的视觉体验。