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

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

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

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

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

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

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

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

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

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

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

Зависит от ваших целевых браузеров. В более новых это очень просто :

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

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

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

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

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

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

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