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

css

1199 просмотра

4 ответа

7 Репутация автора

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

РЕДАКТИРОВАТЬ: сделано .. спасибо!

Автор: dipsi Источник Размещён: 19.07.2016 09:11

Ответы (4)


3 плюса

2755 Репутация автора

Вы можете сделать это с помощью свойства box-shadow, как показано ниже

СОВЕТ: вам нужно подобрать цвет тени к фону или границе изображения для желаемого эффекта.

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

Автор: Sagar Kodte Размещён: 19.07.2016 09:20

0 плюса

81438 Репутация автора

Пока вы оборачиваете изображение в элемент 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>

Автор: Paulie_D Размещён: 19.07.2016 09:56

2 плюса

5864 Репутация автора

Решение

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

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" />

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

Идея "там":

Я предвосхищу это, говоря, что переменные css приходят быстро, но еще не везде (думаю, что 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" />

Автор: Andrew Bone Размещён: 19.07.2016 09:59

1 плюс

108 Репутация автора

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);
    }
Автор: Gunjal Ray Размещён: 19.07.2016 11:35
Вопросы из категории :
32x32