为图像添加上下边框

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="https://i.stack.imgur.com/DkGCC.png" class="img-responsive">
</div>

Answer 2

.img-wrap{
  display: inline-block;
  position: relative;
}
.img-wrap > img{
  position: relative;
  z-index: 2;
}
.img-wrap::before{
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background-color: gray;
  z-index: 1;
}

<div class="img-wrap">
  <img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fglennllopis%2Ffiles%2F2018%2F02%2Fshutterstock_1253381451-300x200.jpg" width="400" />
</div>

Answer 3

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

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