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

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

76 голосов
/ 21 июня 2011

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

Ответы [ 6 ]

135 голосов
/ 21 июня 2011

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

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

8 голосов
/ 21 июня 2011

@ Тамир;Вы можете сделать это с помощью свойства 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

5 голосов
/ 05 ноября 2013

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

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

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

3 голосов
/ 21 июня 2011

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

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

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

2 голосов
/ 19 декабря 2012

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

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

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

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

0 голосов
/ 21 июня 2011

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

...