如何在圖像周圍創建兩個邊框或框陰影？

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

這裏是一個小提琴，應該幫助。 :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/

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/

所有你需要做的是適當的位置和a調整寬度和高度。

Answer 3

這應該讓你開始，沒有反應，但顯示了它可以完成的一種方式。

.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>