В атрибутах box-shadow
различных браузеров есть свойство inset
, которое делает его похожим на «внутреннюю тень» Photoshop. Вам нужно создать элемент поверх вашего изображения с тем же размером и соответствующими атрибутами округления углов (border-radius
, -webkit-border-radius
, -moz-border-radius
), а затем применить к нему тень примерно так:
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
(примечание редактируется; я немного поиграл с этим, и оказалось, что тень рисуется под любым фактическим содержимым элемента, поэтому вам нужно либо применить тень к элементу, который будет наложен поверх изображение или поместите изображение на задний план элемента, к которому применена тень)
(дальнейшее редактирование: рабочий пример JSfiddle .)