html - 为图像添加底部和右边框

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 属性，它可以充当图像或任何框形状的边框。

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

编辑* 除非你需要所有以前的 CSS 来做其他事情，否则我会删除它，你应该只需要 box-shadow 属性。

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

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

<div class="img">
  <img src="/image/DkGCC.png" class="img-responsive">
</div>