Я пытаюсь создать эффект тиснения на изображении (например, поляроид). поэтому на верхней части должна быть тень коробок и левый край, прикрепленный к изображению. Но он не работает... это проблема браузера:
Я создал jsfiddle http://jsfiddle.net/PEgBv/25/, чтобы показать, что я хочу.
Мне нравится это во втором div-окне (где он работает). Но на изображениях тень отображается только без атрибута inset.
Работа с chrome14 на linux
Вставляемые тени CSS3 не работают с изображениями, но есть обходное решение,
Отметьте здесь: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/
Обходной путь не работает для изображений с max-width: 100%; и height: auto;, которые часто используются в дизайнах флюидов, чтобы автоматически масштабировать изображения до достижения их первоначальной ширины. Чтобы окружить <a> (или любой другой элемент) для охвата всего содержимого (изображения), вам нужно добавить отображение: inline-block; к нему, иначе тень не будет отображаться так, как ожидалось.
Итак, помимо стилей в предлагаемом обходном пути, display: inline-block; следует добавить в класс .img-shadow.
Он будет работать, если вы используете изображение на фоне. Таким образом, вместо использования тега img используйте background-image: url(source.jpg); в любом файле css или атрибуте стиля. Яркая тень отображается поверх фонового изображения.