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

79

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

138

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

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

— Кайл
источник

Я думаю, что это поддерживает только IE 9+, просто добавьте: <meta http-equiv="X-UA-Compatible" content="IE=9" />чтобы отобразить страницу в IE9 и IE10 как версию IE9

— Christian Mark

5

Обратите внимание, что фильтр имеет неожиданное поведение в нескольких элементах. Примените его к набору полей и удивитесь. Кроме того, он может попасть в дочерние элементы. И он покажет предупреждение ActiveX для страницы с жуткой желтой полосой. Просто избегай этого. добавьте плоскую светло-серую тень для IE и покончите с этим.

— gcb

Не работает с прозрачными изображениями. Как круглый логотип png.

— Сантош Кумар,

@SantoshKumar, нет, потому что box-shadow не может знать, где находятся непрозрачные пиксели png. Он влияет только на элементы HTML, на сам элемент <img>, но не на содержимое.

— Кайл

1

@Kyle drop-shadow может :)

— Brandito 06

9

@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

— Sandeep
источник

Вам больше не нужны префиксы moz и webkit, последние версии этих браузеров поддерживают box-shadowкак есть :)

— Кайл

@kyle; я знаю, но это не работает в предыдущей версии до бета-версии Mozilla.

— sandeep

2

@Kyle - а хотите ли вы поддержать пользователей старых версий? (есть еще кое-что)

— Spudley

1

@kyle; возможно, вам придется обновить свой ответ, потому что очень много людей не обновляли там mozilla.

— sandeep

7

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

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

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

— Хэнк
источник

2

Проголосовали против; -webkit-filter не является свойством CSS и в любом случае будет поддерживать только браузеры webkit - вам лучше также добавить версию без префикса и, возможно, префиксы -moz-, -ms- и -o-, следует Mozilla, Microsoft или Opera (пока Opera 12 все еще находится в обращении ...)

— Алджи Тейлор

Проголосовали. Нестандартная собственность не делает ее бесполезной. Есть варианты использования, в которых вам не нужно ничего поддерживать, кроме webkit. Этот ответ мне помог, и эффект -webkit-filter в моем случае выглядит более подходящим, чем box-shadow.

— Антон Джебрак

Это лучший ответ, потому что он затеняет содержимое, а не контейнер

— смедасн

3

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

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

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

— Болдевин
источник

2

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

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

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

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

— Петрогад
источник

0

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

— кинакута
источник