biên giới Blur trên hình ảnh qua css

Question

Tôi đang cố gắng để làm một cái gì đó như thế này:

Tôi nghĩ rằng nó có thể được thực hiện bằng hình nền và hình ảnh khác (mask) ở trên nó với một trung tâm trong suốt. Nhưng có thể làm điều tương tự với css thuần túy không?

Answer 1

Mặc dù bạn không thể áp dụng một box-shadow trực tiếp đến một hình ảnh mà bạn có thể áp dụng nó với một HTML :before or :after

<div class="shadow"> 
      <img src="http://lorempixel.com/400/200/" /> 
    </div> 

CSS

.shadow 
{ 
    display:block; 
    position:relative; 
} 

img { 
    width: 100%; 
    height: 100%; 
} 

.shadow:before 
{ 
    display:block; 
    content:''; 
    position:absolute; 
    width:100%; 
    height:100%; 
    -moz-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); 
    -webkit-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); 
    box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); 
} 

Answer 2

Yess nó có thể như thế này:

.img { 
border:1px solid black; 
} 
.img:hover { 
border: none; 
box-shadow: 0 0 10px black inset; 
}