时间戳

首页 > 解决方案 > 为图像添加底部和右侧边框

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

问题描述

我正在尝试为图像添加右边框和下边框。它应该如下所示： 在此处输入图像描述

到目前为止，我得到了这个： 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;
 }

这给出了：在此处输入图像描述 底部边框甚至不显示。有没有办法让这个完全像图像中一样？

标签： htmlcss

解决方案

您可以使用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>

推荐阅读