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

Question

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

Answer 1

Использовать простой CSS3 (не поддерживается в IE <9) </p>

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);
}

Поиграйте с настройками, чтобы увидеть, что вам подходит:)

Answer 2

@ Тамир;Вы можете сделать это с помощью свойства 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 для эмуляции тени блока в этих браузерах, и вы можете использовать filter, как сказал Кайл, так:

filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')

, из которого вы можете создать свой фильтрздесь http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

Answer 3

Работает как шарм!

.imageClass {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

Вуаля!Это оно!Очевидно, что это не сработает, то есть, но кого это волнует ...

Answer 4

Зависит от того, какие у вас целевые браузеры.В более новых версиях это так же просто, как и :

   -moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
        box-shadow: 0 0 5px #fff;

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

Answer 5

опоздал на вечеринку здесь;однако просто хотелось добавить немного дополнительного веселья ..

box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;

даст вам приятный внешний вид с мягким изображением.Заполнение даст вам смоделированную белую границу (или любую другую границу, которую вы установили).RGBA просто позволяет вам сделать opicity для определенного цвета;0,0,0 черный.Вы можете так же легко использовать любой другой цвет RGB.

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

Answer 6

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