1

Есть такая картинка с box-shadow эффектом.

Как можно этой картинке добавить задний border такой же как и на макете.

введите сюда описание изображения

.img-container {
    max-width: 85%;
    margin-left: 30px;
}
img {
  float: left;
  width: 50%;
  box-shadow:0.8rem 0.8rem 1rem 0rem rgba(0,0,0,.92);
  -webkit-box-shadow:0.8rem 0.8rem 1rem 0rem rgba(0,0,0,.92);
  border-radius: 5px;
}
img:before {
   border: 1px solid blue;
}
<div class="img-container">
  <img src="https://s12.favim.com/orig/160323/girls-pretty-pretty-girl-tumblr-girls-Favim.com-4106552.jpg">
</div>

1 ответ 1

3

*{
  box-sizing:border-box;
}
.img-container{    
    max-width: 300px;
    margin-left: 30px;
    padding:10px 0 0 10px;
    position:relative;
    border-radius: 5px;
}
.img-container:before{
  content:'';
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  border:4px solid #acd;
  border-radius:inherit;
  display:block;
  position:absolute;
  top:0px;
  left:0px;
}
img {
  display:block;
  width: 100%;
  box-shadow:0.8rem 0.8rem 1rem 0rem rgba(0,0,0,.6);
  border-radius: inherit;;
  position:relative;
  z-index:2;
}
<div class="img-container">
  <img src="https://s12.favim.com/orig/160323/girls-pretty-pretty-girl-tumblr-girls-Favim.com-4106552.jpg">
</div>

1
  • 1
    спасибо плюсик от меня
    – Randall
    11 июл 2018 в 12:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.