为图像添加底部和右边框

Question

我正在尝试为图像添加右边框和下边框.它应该如下所示:

到目前为止,我有这个:HTML:

<div class="img">
<img src="office.jpg" class="img-responsive">
</div>

CSS:

.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;
 }

这给出了: 底部边框甚至没有显示.有没有办法在图像中得到这个？

Answer 1

您可以使用box-shadow可以充当图像边框的css属性,或者实际上任何框形状.

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

编辑*除非你需要所有以前的CSS用于别的东西,我只是删除它,你应该只需要box-shadow属性.

至于你的代码,这里是你想要的蓝色:

.img img {
  box-shadow: 12px 12px #17457a;
  width: 50%;
}

<div class="img">
  <img src="https://i.stack.imgur.com/DkGCC.png" class="img-responsive">
</div>