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

Ответ 1

Использовать простой 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);
}

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

Ответ 2

@tamir; вы cna сделаете это с помощью свойства 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

Ответ 3

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

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

Voila! Это! Очевидно, что это не сработает, но кто заботится...

Ответ 4

В зависимости от ваших целевых браузеров. В новых так же просто, как:

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

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

Ответ 5

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

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

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

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

Ответ 6

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