CSS boxshadow над изображением

Question

Я хочу разместить boxshadow на изображении. Я стараюсь следовать, но он просто добавляет его за изображение, делая его невидимым. Как это можно сделать?

CSS и HTML:

.box2 { 
 
     float: left; 
 
     height: 150px; 
 
     width: 150px; 
 
     box-shadow: inset 0px 0px 0px 10px #f00; 
 
    }

<div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>

Проблема:

JSFiddle Demo: http://jsfiddle.net/Lwm95h7q/

Answer 1

Вы можете сделать это с помощью :after, например.

.box1{ 
    height: 150px; 
    width: 150px; 
    background: green; 
    box-shadow:inset 0px 0px 0px 10px #f00; 
    float: left; 
    margin-right: 50px; 
} 

.box2 { 
    position: relative; 
    float: left; 
    height: 150px; 
    width: 150px; 
    box-shadow: inset 0px 0px 0px 10px #f00; 
} 

.box2:after { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    content: ''; 
    box-shadow: inset 0px 0px 0px 10px #f00; 
    z-index: 1; 
} 

Взгляните на скрипке: http://jsfiddle.net/skeurentjes/Lwm95h7q/5/

Answer 2

Это может быть достигнуто с помощью :after псевдо-элемента с box-shadow над верхней частью img:

• Добавить position: relative; в .box2 для обеспечения возможности размещения псевдоэлемента относительно него
• Add .box2:after с position: absolute;, чтобы вынуть его из потока документов. Установите height и width, равные height, и width от .box2 и установите его на top и left.box2. Наносить box-shadow к этому

.box1 { 
 
    background: green; 
 
    box-shadow: inset 0px 0px 0px 10px #f00; 
 
    float: left; 
 
    height: 150px; 
 
    margin-right: 50px; 
 
    width: 150px; 
 
} 
 
.box2 { 
 
    float: left; 
 
    height: 150px; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 
.box2:after { 
 
    box-shadow: inset 0px 0px 0px 10px #f00; 
 
    content: ""; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
}

<div class="box1">some text</div> 
 
<div class="box2"> 
 
    <img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /> 
 
</div>

Answer 3

вы не дали набивка так .. добавить этот CSS

.box2 { 
float: left; 
height: 150px; 
width: 150px; 
box-shadow: inset 10px 10px 10px 10px #f00; 
padding: 10px; 
    } 

Answer 4

Просто замените box-shadow с outline: 10px solid #f00;outline-offset:-10px;

.box1{ 
 
    height: 150px; 
 
    width: 150px; 
 
    background: green; 
 
    box-shadow:inset 0px 0px 0px 10px #f00; 
 
    float: left; 
 
    margin-right: 50px; 
 
} 
 

 
.box2 { 
 
    float: left; 
 
    height: 150px; 
 
    width: 150px; 
 
    outline: 10px solid #f00; 
 
    outline-offset:-10px; 
 
    
 
}

<div class="box1">some text</div> 
 

 
<div class="box2"><img src="https://farm1.staticflickr.com/502/18386328915_c63c4f6c7f_q.jpg" /></div>