html - 如何在图像周围创建两个边框或框阴影？

我正在尝试仅使用CSS创建此背景/边框，但遇到一些困难：


我的代码：

.profile-userpic img {
    width: 80%;
    background-color: transparent;
    box-shadow: -10px -10px 0 0px #291026, 10px 10px 0 0px #f00;
}

<div class="profile-userpic">
    <img src="{% get_avatar_url usuario %}" class="img-responsive " alt="">
</div>

其实我得到了这个：


我只需要将红色背景转换为带有边框的透明对象，就像原始设计一样

图片需要响应，我需要在其他元素（例如按钮或div）中使用此“边框/背景”。

最佳答案

这是一个小提琴，应该有所帮助。 :before，:after和z-index对于这样的事情很有价值。

的CSS

.profile-userpic {
  position: relative;
  display: inline-block;
}

.profile-userpic:before,
.profile-userpic:after {
  z-index: 1;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

.profile-userpic:before {
  background-color: red;
  top: -8px;
  left: -12px;
}

.profile-userpic:after {
  background-color: #fff;
  border: 1px solid red;
  bottom: -25px;
  right: -25px;
}

.profile-userpic img {
  z-index: 2;
  position: relative;
}

https://jsfiddle.net/d6tv5jp3/3/