CSS: создание белого свечения вокруг изображения

Question

CSS: создание белого свечения вокруг изображения

Как я могу создать белое свечение в качестве границы изображения неизвестного размера?

664 6

css css3 image border glow

6 ответов:

Comments

Ничего не найдено.

Kyle · Accepted Answer · 2011-06-21 12:57:37

используйте простой CSS3 (не поддерживается в IE
img
{
    box-shadow: 0px 0px 5px #fff;
}
Это поместит белое свечение вокруг каждого изображения в вашем документе, используйте более конкретные селекторы, чтобы выбрать, какие изображения вы хотели бы свечение вокруг. Вы можете изменить цвет, конечно :)

Если вы беспокоитесь о пользователях, которые не имеют последние версии браузеров, используйте этот:
img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}
для IE вы можете использовать фильтр свечения (не уверен, какие браузеры поддерживают это)
img
{
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}
играть с настройками, чтобы увидеть, что подходит вам :)

sandeep · Accepted Answer · 2011-06-21 12:48:13

@tamir; вы можете сделать это с помощью свойства css3.
img{
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2;
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2;
box-shadow: 0px 0px 3px 5px #f2e1f2; 
}
проверьте скрипку http://jsfiddle.net/XUC5q/1/ & ваш может генерировать отсюда http://css3generator.com/

Если вам это нужно для работы в старых версиях IE, вы можете использовать CSS3 PIE для эмуляции box-shadow в этих браузерах и вы можете использовать filter Как сказал Кайл вот так
filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')
вы можете создать свой фильтр из здесь http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

Hank · Accepted Answer · 2016-06-15 20:41:47

работает как шарм!
.imageClass {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}
вуаля! Вот так! Очевидно, что это не будет работать в ie, но кого это волнует...

Boldewyn · Accepted Answer · 2011-06-21 12:06:20

зависит от того, что ваши целевые браузеры. В новых это так же просто, как:
   -moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
        box-shadow: 0 0 5px #fff;
для старых браузеров, вы должны реализовать обходные пути, например,на этом примере, но вам, скорее всего, понадобится дополнительная наценка.

Petrogad · Accepted Answer · 2012-12-18 22:46:31

опоздала на вечеринку здесь, но просто хотел добавить немного дополнительного удовольствия..
box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;
даст вам красивый мягкий в изображении. Заполнение даст вам симулированную белую границу (или любую границу, которую вы установили). rgba просто позволяет вам делать opicity на определенном цвете; 0,0,0-черный. Вы можете так же легко использовать любой другой цвет.

надеюсь, это кому-то поможет!

kinakuta · Accepted Answer · 2011-06-21 12:20:06

вы можете использовать CSS3 для создания такого эффекта, но тогда вы увидите его только в современных браузерах, которые поддерживают box shadow, если вы не используете polyfill как CSS3PIE. Так, например, вы могли бы сделать что-то вроде этого: http://jsfiddle.net/cany2/