到目前为止,我得到了这个: 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;
}
最佳答案
您可以使用 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>
关于html - 为图像添加底部和右边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53440262/