CSS 是我们前端开发中使用频率非常高的技术,常被用于对网页样式进行定制。其中,通过 CSS 给图片添加下边框,并让下边框上阴影效果的需求也是比较常见的,那么今天就来介绍一下如何实现这个效果。
/*首先,定义图片边框*/ img { border-bottom: 2px solid #666; } /*接着,定义阴影效果*/ img { Box-shadow: 0px 2px 2px #888; }
如上代码,我们首先给图片定义了一个下边框,宽度为 2 像素,颜色为 #666,这样就给图片添加了下边框。接下来,我们再通过 Box-shadow 属性定义阴影效果,其中,第一个参数是横向阴影偏移量,第二个参数是垂直阴影偏移量,第三个参数是阴影模糊半径,第四个参数是阴影颜色,这样就实现了阴影效果。