Вот так я знал, что стилями могу настроить «рамку» изображению, осталось только сделать, приступим. Для начала возьмём фотографию за «основу», я для примера взял этого голубя:
( фото можно приобрести здесь )
Мой код вставки сейчас выглядит так:
<img src="/URL" style="" />
И здесь в style (я этого делать не стал), можно добавить ширину изображения, например, у меня «по умолчанию» голубь 500х500, а в Вашем случае, это может быть слишком много и тогда, можно сделать width:300px; опять же, если этого требует ситуация.
Текущее изображение квадратное, его конечно же можно «обрезать», например, в Adobe Photoshop, но так как речь идёт о работе в CSS, то начнём с того, что сделаем изображение «круглым», для этого добавим border-radius в style:
<img src="/URL" style="border-radius:50%;" />
Теперь дело за «рамкой», её можно сделать при помощи теней, в таком случае наши стили станут выглядеть так:
<img src="/URL" style="border-radius:50%; box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5)" />
Иногда ситуация требует вмешательства отступов, это всё решается путём «margin»’а (margin, margin-top, margin-left, margin-right, margin-bottom).
