Размытие границы изображения

Question

Мой вопрос: как я могу размыть только границу изображения? Изображение не должно быть размыто, просто граница.

EDIT: сделано..thanks!

Answer 1

Глядя на ваши комментарии на ответ Сагар Kodte, является это что вы хотели?

img { 
 
    border: 2px solid #000; 
 
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.8); 
 
}

<img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />

я добавил границу 2px к изображениям и коробки тени.

«Выход есть» идея:

Я предварить это, говоря css variables приходят быстро, но не everywhere пока (Только IE отстает, я думаю).

Это, как говорится, я думаю, что они прекрасная идея и поставит этот ответ здесь, чтобы вы знали о их существовании.

.red { 
 
    --border-color: #900; 
 
} 
 
.green { 
 
    --border-color: #090; 
 
} 
 
.blue { 
 
    --border-color: #009; 
 
} 
 
.clown { 
 
    --border-color-top: green; 
 
    --border-color-right: yellow; 
 
    --border-color-bottom: red; 
 
    --border-color-left: blue; 
 
} 
 
img { 
 
    border-top: 2px solid var(--border-color-top, var(--border-color, #000)); 
 
    border-bottom: 2px solid var(--border-color-bottom, var(--border-color, #000)); 
 
    border-right: 2px solid var(--border-color-right, var(--border-color, #000)); 
 
    border-left: 2px solid var(--border-color-left, var(--border-color, #000)); 
 
    box-shadow: 0 -4px 10px -1px var(--border-color-top, var(--border-color, #000)), 4px 0 10px -1px var(--border-color-right, var(--border-color, #000)), 0 4px 10px -1px var(--border-color-bottom, var(--border-color, #000)), -4px 0 10px -1px var(--border-color-left, var(--border-color, #000)); 
 
    margin: 10px; 
 
} 
 
.img { 
 
    border: 2px solid var(--border-color, #000); 
 
    box-shadow: 0 0 10px var(--border-color, #000); 
 
    margin: 10px; 
 
}

<b>Standard:</b> 
 
<br> 
 
<img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" /> 
 
<br> 
 
<b>Single color:</b> 
 
<br> 
 
<img class="red" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" /> 
 
<img class="green" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" /> 
 
<img class="blue" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" /> 
 
<br> 
 
<b>Mulitple colors:</b> 
 
<br> 
 
<img class="clown" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" />

Answer 2

Вы можете сделать это с помощью коробчатого теневой собственности как ниже

TIP: вам нужно сопрягать цвет тени для фона или границы изображения для получения желаемого эффекта.

.image-blurred-edge { 
 
    background-image: url('http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg'); 
 
    width: 200px; 
 
    height: 200px; 
 
    box-shadow: 0 0 8px 8px #fff inset; 
 
}

<div class="image-blurred-edge"></div>

Использование img тега вы должны использовать псевдо-элемент, который является :before

.shadow 
 
{ 
 
    display:inline-block; 
 
    position:relative; 
 
    width: 150px; 
 
    height: 150px; 
 
} 
 
.shadow:before 
 
{ 
 
    display:block; 
 
    content:''; 
 
    position:absolute; 
 
    width:100%; 
 
    height:100%; 
 
    -moz-box-shadow:inset 0px 0px 8px 4px #fff; 
 
    -webkit-box-shadow:inset 0px 0px 8px 4px #fff; 
 
    box-shadow:inset 0px 0px 8px 4px #fff; 
 
}

<div class="shadow"> 
 
      <img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" /> 
 
    </div>

Учитывая ваш последний комментарий Попробуйте это решение.

.shadow img{ 
 
    border:2px solid #000; 
 
    box-shadow:1px 1px 10px 2px; 
 
}

<div class="shadow"> 
 
     <img src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" /> 
 
</div>

Answer 3

Пока вы завернуть изображение в DIV вы можете применить коробчатую тень к этому.

Он появится под изображение, чтобы начать, так что вы должны применять более низкую z-index к изображению

body { 
 
    text-align: center; 
 
} 
 
.img-wrap { 
 
    display: inline-block; 
 
    margin: 2em; 
 
    box-shadow: inset 0 0px 4px 4px black; 
 
} 
 
img { 
 
    display: block; 
 
    position: relative; 
 
    z-index: -1; 
 
}

<div class="img-wrap"> 
 
    <img src="http://www.fillmurray.com/284/196" alt="" /> 
 
</div>

Answer 4

HTML

<img class="borderBlur" src="http://visitwabashcounty.com/wp-content/uploads/6056710418_03fda4569b_z-150x150.jpg" /> 

CSS

.borderBlur { 
     border: 2px solid #000; 
     box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.8); 
    }