BoxShadow: вставка на теге img

Я пытаюсь создать эффект тиснения на изображении (например, поляроид). поэтому на верхней части должна быть тень коробок и левый край, прикрепленный к изображению. Но он не работает... это проблема браузера:

Я создал jsfiddle http://jsfiddle.net/PEgBv/25/, чтобы показать, что я хочу.

Мне нравится это во втором div-окне (где он работает). Но на изображениях тень отображается только без атрибута inset.

Работа с chrome14 на linux

Ответы

Ответ 1

Вставляемые тени CSS3 не работают с изображениями, но есть обходное решение,

Отметьте здесь: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/

Ответ 2

Обходной путь не работает для изображений с max-width: 100%; и height: auto;, которые часто используются в дизайнах флюидов, чтобы автоматически масштабировать изображения до достижения их первоначальной ширины. Чтобы окружить <a> (или любой другой элемент) для охвата всего содержимого (изображения), вам нужно добавить отображение: inline-block; к нему, иначе тень не будет отображаться так, как ожидалось.

Итак, помимо стилей в предлагаемом обходном пути, display: inline-block; следует добавить в класс .img-shadow.

Ответ 3

Он будет работать, если вы используете изображение на фоне. Таким образом, вместо использования тега img используйте background-image: url(source.jpg); в любом файле css или атрибуте стиля. Яркая тень отображается поверх фонового изображения.