Html 向图像添加底部和右侧边框

我正在尝试为图像添加右边框和下边框。应该是这样的：

到目前为止，我得到了这个： HTML:

这使得：

---

底部边框甚至不显示。有没有办法让它与图像中的完全一样？

您应该使用框阴影而不是边框

.img {
    box-shadow: 10px 10px 1px #ccc;
}

.img wrap{
显示：内联块；
位置：相对位置；
}
.img wrap>img{
位置：相对位置；
z指数：2；
}
.img wrap:：之前{
内容：''；
位置：绝对位置；
顶部：10px；
左：10px；
宽度：100%；
身高：100%；
背景颜色：灰色；
z指数：1；
}

---

您可以使用

框阴影

css属性，该属性可以用作图像或任何框形状的边框

如果您想了解更多信息，可以访问此链接

编辑*除非您需要将以前的所有CSS用于其他内容，否则我将删除它，您应该只需要

box shadow

属性

至于你的代码，这里是你想要的蓝色：

.img img{
盒影：12px 12px#17457a；
宽度：50%；
}

.img:before {
 content: '';
 width: 100%;
 height: 15px;
 position: absolute;
 bottom: 0;
 left: 0;
 background-color: #17457A;
 } 

.img:after {
 content: '';
 height: 100%;
 width: 15px;
 position: absolute;
 right: 7;
 top: 15;
 background-color: #17457A;
 }

.img {
    box-shadow: 10px 10px 1px #ccc;
}