Закруглить углы у картинки на сайте
 | |
| Доброе время суток, дорогие друзья! Сразу хочу сказать то что если вы не знаете как закруглить края у картинок с помощью CSS стилей, то вы попали туда куда нужно так как я в этом уроке вам это продемонстрирую и покажу как это делается. делается это легко и просто и вы сами в этом сможете убедится тогда когда дочитаете данный урок до самого конца. Мы будем рассматривать примеры закругления углов как у всех четырёх сторон картинки так и у только нескольких углов, вдруг вам нужно или захочется закруглить только один угол в общем садитесь по удобнее и приготовьтесь получать нужную для вас информацию. В целом тут сложного не чего нет и мы будем работать только со стилем border-radius который нам и будет помогать закруглять наши углы у картинок. И так возьмём для примера одну картинку! Я взял Машу с Медведем.  И с этой картинкой я буду работать и показывать вам примеры закругления углов у картинок, вы конечно же можете взять любую свою картинку и практиковаться на ней. И так для начала нам нужно установить картинку на сайте в то место где она нам нужна и необходима и для этого скопируйте код ниже и установите его где и будет ваша картинка с закруглёнными углами. Код <div id="img-rad" style="background: url('ссылка на картинку'); width: 448px; height: 250px;"></div> Где написана ссылка на картинку там естественно и указываем адрес к своей картинки. Если вы заметили то мы обозначили нашу картинку стилем img-rad и с помощью его мы сейчас пропишем картинке стиль. Код #img-rad { border-radius: 10px;//Указываем радиус скругления } Этот стиль нужно вписать в стили вашего сайта там где они вам не мешают и будет удобно с ними работать. И так в первом примере мы закруглили все четыре стороны:  Теперь мы закруглим только верхние углы и для этого мы изменим немного значение border-radius в стиле. Код #img-rad { border-radius: 150px 150px 0px 0px;//Указываем радиус скругления } Вот видите немного изменений и у нас вот какая получилась картинка:  Таким же образом можно поменять значения в стиле border-radius и сделать закруглённые только нижние углы . Код #img-rad { border-radius: 0px 0px 150px 150px;//Указываем радиус скругления } И смотрите как ещё раз необычайно у нас изменилась картинка наша!  И так вы уже наверное поняли что закруглять углы не так сложно как только может показаться на первый взгляд и мы с вами смогли уже сделать несколько вариантов, но мы просмотрели не всё так как теперь мы с вами закруглим только один правый верхний угол у картинки. Мы в стиле border-radius ещё разок изменим значение вот на это Код #img-rad { border-radius: 300px 0px 150px 300px;//Указываем радиус скругления } И у нас получится вот так вот  Как видите картинка изменяется каждый раз и этому всему способствует всего лишь один стиль border-radius и примеров можно привести множество, к примеру вот так Или вот так  Так что изменяйте значения border-radius и вперёд к изучению его возможностей, а у меня на этом пока всё! | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
