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

Question

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

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

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

Работа с Chrome14 на Linux

Answer 1

Тени CSS3 не работают с изображениями, но есть обходной путь,

Проверьте здесь: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/

Answer 2

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

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

Answer 3

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