Как применить внутренний штрих к изображению только с помощью CSS? - PullRequest
1 голос
/ 15 ноября 2011

Учитывая фото, вот так:

Profile photo w/o a stroke

Как я могу применить внутренний штрих, как показано ниже, который в фотошопе делается с внутренней тенью? Предложения?

Profile photo with a stroke

1 Ответ

6 голосов
/ 15 ноября 2011

В атрибутах 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 .)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...