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

Question

我正在尝试仅使用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）中使用此“边框/背景”。

Answer 1

这应该让你开始，没有回应，但显示了一种可以实现的方式。

.profile-userpic img {
  transform:translateY(20px) translateX(30px);
}
.profile-userpic:before {
  content:'';
  display:block;
  width:250px;
  height:280px;
  background:black;
  position:absolute;
  z-index:-1;
}
.profile-userpic:after {
  content:'';
  display:block;
  width:250px;
  height:280px;
  border:1px solid black;
  position:absolute;
  z-index:-1;
  top:22px;
  left:60px;
}

<div class="profile-userpic">
    <img src="http://placehold.it/250" class="img-responsive " alt="">
</div>

Answer 2

.ctn {
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
 
}

.picture {
  width: 200px;
  height: 200px;
  background-color: purple;
  position: relative;
}

.picture:before {
  position: absolute;
  background: red;
  content:'';
  width: 100%;
  height: 108%;
  top:-12px;
  left:-12px;
  z-index: -1;
}

.picture:after {
  position: absolute;
  background: transparent;
  border: 2px solid red;
  content:'';
  width: 105%;
  height: 107%;
  top:-6px;
  left:10px;
  z-index: -1;
}

<div class="ctn">
  
  <div class="picture"></div>
  
</div>

您是否考虑过使用:before和:after元素：

看看我做的这个样本：

https://jsfiddle.net/bo2nn6kk/

您需要做的就是适当地定位并调整宽度和高度。

Answer 3

这是一个应该有帮助的小提琴。 :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/