В этой статье мы расскажем о том, каким образом кроссбраузерно закруглить углы у картинки. Вплоть до того, чтобы оно было помещено в круг.
Сейчас очень модным стало в дизайне сайтов вставлять не обычные прямоугольные изображения, а закруглить их углы, делая тем самым их более симпатичными.
Если переносить такую задумку из макет-дизайна на веб-страницу, то тут используется свойство border-radius применительно к самому изображению - тег img.
Слева - исходное изображение, справа - с border-radius:40px;
Как вы уже поняли, в качестве значения наше свойство получает значение закругления, чаще всего оно численное. И степень закругления зависит от размеров изображения.
Предположим вот как задумал дизайнер и нарисовал такой макет(это всего лишь изображение):
Мы получили этот самый макет и фото Светланы в хорошем качестве:
Приступим к процессу верстки. Сначала зададим разметку будущей странице:
А теперь добавляем стили:
Стоит обратить внимание на 14 строчку, в ней мы задаем border-radius равный 100%, что полностью закругляет углы и любое квадратное изображение превращается в круглое.
Результат примеры вы можете посмотреть на демо-странице:
Или скачать все файлы примера:
Самое замечательное, что данный метод кроссбраузерен и работает во всех браузерах последних версий, в том числе и в IE 9+.
Добавить комментарий
Авторизоваться с помощью: