Как скруглить углы в html через css

Закругление углов CSS: свойство border-radius — учебник CSS

В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style, с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.

Как закруглить углы: свойство CSS3 border-radius

Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:

.borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; }

Стиль, описанный выше, даст следующий результат на элементе размером 200×200 пикселей:

Обратите внимание

Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:

.borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; } .borderElement1 { background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; }

Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:

.borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; }

Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства:

  • border-top-left-radius — для верхнего левого угла;
  • border-top-right-radius — для верхнего правого угла;
  • border-bottom-left-radius — для нижнего левого угла;
  • border-bottom-right-radius — для нижнего правого угла.

Принцип скругления углов

На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px, — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей.

В случае, когда задаются два значения через косую черту, например, 30px/20px, закругление углов будет происходить по эллипсу.

Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px, а второе — длиной вертикальной полуоси — 20px:

Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

Далее в учебнике: свойство box-shadow — создаем тени для элементов.

Источник: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/border-radius

Как закруглить углы изображения на CSS без Фотошопа

Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.

Вебмастера повсеместно используют скругленные углы у блоков и рамок на сайтах. Я в этой статье расскажу как же закруглить углы у картинок и фотографий на сайте без использования сторонних программ, только с помощью CSS.

Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.

Закругление углов у блоков DIV

По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius, например так:

border-radius: 10px;

Для наглядности нарисуем два блока с прямыми и скругленными углами:

Блок с прямыми углами

Блок с закругленными углами

По аналогии с примером выше можно закруглить углы и у картинок на сайте, например фотографий. Для наглядности закруглим углы для фотографии со страницы https://moonback.ru/page/shinomontazh

Вот изображение без CSS обработки

А теперь с загругленными углами:

border-radius: 10px;

Чтобы стало совсем «красиво» с начала добавим окантовку…

border-radius: 10px; border: 5px #ccc solid;

а затем и тени:

border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;

Вариант ниже (закругленные углы с тенью без бордюра) очень похож на коврик для мыши:

border-radius: 10px; box-shadow: 0 0 10px #444;

И напоследок полное издевательство над изображением

border-radius: 50%; border: 5px #cfc solid; box-shadow: 0 0 10px #444;

Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки CSS стилей вашим браузером.

Маленькое лирическое отступление

Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px, то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.

А стиль box-shadow не влияет на размер картинки, тень как бы наезжает на соседние элементы. При его использовании верстка сайта не страдает.

Как закруглить углы картинок на WordPress

Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:

Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой.

В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю.

Вы можете дополнить один из них вышеуказанными параметрами.

Важно

Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:

.alignnone { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }

Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG:

img { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }

Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!

Вместо заключения

Все примеры в статье условные и призваны лишь продемонстрировать некоторые возможности CSS по обработки изображений и показать как это просто.

Поделись этой страницей с друзьями!

Источник: https://moonback.ru/page/css-img-radius

Создаем геометрические фигуры с помощью CSS

На мой взгляд, одним из интересных нововведений в CSS3, является возможность использования меньшего количества изображений в веб-дизайне и создание различных фигур.

Все те фигуры, которые вы рисовали ранее в графических редакторах теперь можно сделать с помощью CSS3. Новые CSS свойства transform и border-radius позволяют делать это, не прибегая к помощи сторонних программ.

В сегодняшнем уроке мы создадим геометрические фигуры, используя только свойства CSS3.

Что вам понадобится для использования данного руководства

  • Знание CSS3;
  • Время и внимание.

Скачать исходные файлы
Просмотреть демонстрацию

Окружность

HTML
Для создания окружности с помощью CSS, во-первых, мы будем использовать тег div. Именуем его ID именем фигуры. Итак, в первом примере, ID будет равно Circle:

CSS
Что касается CSS, просто задаем значения width и height, а затем задаем значение border radius, равное половине от width и height:

#circle { width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; }

Квадрат

HTML
Чтобы создать квадрат в CSS, как и в примере с окружностью, мы создаем div с идентификатором square. Итак, ниже приведен код для блока div:

CSS
Для создания квадрата в CSS, просто задаем значения width и height равные друг другу:

#square { width: 120px; height: 120px; background: #f447ff; }

Прямоугольник

HTML
Чтобы создать прямоугольную форму, в CSS, как и в случае с квадратом, настраиваем div, где ID равно rectangle:

CSS
Так же, как и в случае с квадратом, мы зададим значения width и height, но на этот раз width будет больше, чем height:

#rectangle { width: 220px; height: 120px; background: #4da1f7; }

Овал

HTML
Для создания овала в CSS, создаем div с ID равным oval:

CSS
Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height:

#oval { width: 200px; height: 100px; background: #e9337c; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px; }

Треугольник

HTML
И снова, для создания треугольника с помощью CSS, делаем div с ID равным triangle.

CSS
Для создания треугольника мы будем манипулировать свойством border. Изменяя ширину границы, вы получите различные углы поворота:

#triangle { width: 0; height: 0; border-bottom: 140px solid #fcf921; border-left: 70px solid transparent; border-right: 70px solid transparent; }

Треугольник, направленный вниз

HTML
Создаем перевернутый треугольник с помощью CSS. Снова создаем div. ID равно triangle_down:

CSS
Создавая перевернутый треугольник, оперируем толщиной границы:

#triangle_down { width: 0; height: 0; border-top: 140px solid #20a3bf; border-left: 70px solid transparent; border-right: 70px solid transparent; }

Треугольник, направленный влево

HTML
Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left:

CSS
Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:

#triangle_left { width: 0; height: 0; border-top: 70px solid transparent; border-right: 140px solid #6bbf20; border-bottom: 70px solid transparent; }

Треугольник, направленный вправо

HTML
Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right:

CSS
Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:

#triangle_right { width: 0; height: 0; border-top: 70px solid transparent; border-left: 140px solid #ff5a00; border-bottom: 70px solid transparent; }

Ромб

HTML
Для создания фигуры «ромб», создаем div с ID diamond:

CSS
Ромб можно создать несколькими способами. Используя свойство transform совместно со значениями свойства rotate, мы можем отобразить два треугольника, расположенных рядом друг с другом:

#diamond { width: 120px; height: 120px; background: #1eff00; /* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Rotate Origin */ -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; margin: 60px 0 10px 310px; }

Трапеция

HTML
Для создания фигуры «трапеция», создаем div с ID равным trapezium.

CSS
Трапеция может быть создана методом установки одинаковых значений левой и правой границы с плоской нижней границей:

#trapezium { height: 0; width: 120px; border-bottom: 120px solid #ec3504; border-left: 60px solid transparent; border-right: 60px solid transparent; }

Параллелограмм

HTML
Для создания фигуры «параллелограмм», создаем div с ID равным parallelogram:

CSS
Для создания параллелограмма, устанавливаем значение transform равное skew для поворота элемента на угол в 30 градусов:

#parallelogram { width: 160px; height: 100px; background: #8734f7; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); transform: skew(30deg); }

Звезда

HTML
Для создания фигуры «звезда», создаем div с ID равным star:

CSS
Создание фигуры «звезда» — последовательность странных манипуляций с границами с использованием свойства transform равным rotate. Смотрите код ниже:

#star { width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star:before { height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star:after { content: ''; width: 0; height: 0; position: absolute; display: block; top: 3px; left: -105px; color: #fc2e5a; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); }

Читайте также:  Что такое майнинг криптовалюты простыми словами

Звезда (6ти конечная)

HTML
Для создания фигуры «шестиконечная звезда», создаем div с ID равным parallelogram:

CSS
Шестиконечная звезда создается с помощью свойства border. Создаем два набора фигур и комбинируем в одну:

#star_six_points { width: 0; height: 0; display: block; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #de34f7; margin: 10px auto; } #star_six_points:after { content: ""; width: 0; height: 0; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #de34f7; margin: 30px 0 0 -50px; }

Пятиугольник

HTML
Для создания фигуры «пятиугольник», создаем div с ID равным pentagon:

CSS
Создание пятиугольника заключается в создании двух элементов, которые затем соединяются в один. Первый элемент – форма трапеции. Затем вверху добавляем треугольную форму:

#pentagon { width: 54px; position: relative; border-width: 50px 18px 0; border-style: solid; border-color: #277bab transparent; } #pentagon:before { content: ""; height: 0; width: 0; position: absolute; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #277bab; }

Шестиугольник

HTML
Для создания фигуры «шестиугольник», создаем div с ID равным hexagon:

CSS
Есть несколько способов создания шестиугольника. Один из них полностью идентичен созданию пятиугольника. Создаем прямоугольную форму и вверху добавляем два треугольника:

#hexagon { width: 100px; height: 55px; background: #fc5e5e; position: relative; margin: 10px auto; } #hexagon:before { content: ""; width: 0; height: 0; position: absolute; top: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #fc5e5e; } #hexagon:after { content: ""; width: 0; height: 0; position: absolute; bottom: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #fc5e5e; }

Восьмиугольник

HTML
Для создания фигуры «восьмиугольник», создаем div с ID octagon:

CSS
Восьмиугольник также интересная фигура. Сначала создаем две трапециевидные формы и по бокам располагаем два треугольника. Есть еще несколько способов, но этот самый действенный:

#octagon { width: 100px; height: 100px; background: #ac60ec; position: relative; } #octagon:before { content: ""; width: 42px; height: 0; position: absolute; top: 0; left: 0; border-bottom: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; } #octagon:after { content: ""; width: 42px; height: 0; position: absolute; bottom: 0; left: 0; border-top: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; } }

Сердце

HTML
Для создания фигуры «сердце», создаем div с ID heart:

CSS
Эта фигура довольно сложная в создании, но её можно сделать с помощью вращения элементов под разными углами и смены значения свойства transform-origin для смены позиции вращаемых элементов:

#heart { position: relative; } #heart:before,#heart:after { content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; }

Яйцо

HTML
Для создания фигуры «яйцо», создаем div с ID egg:

CSS
Концепция фигуры «яйцо» похожа на концепцию фигуры «овал», за исключением свойства height, которое больше, чем width. И особое внимание в этой фигуре придается свойству radius. С помощью подбора его значений можно добиться нужного результата:

#egg { width: 136px; height: 190px; background: #ffc000; display: block; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }

Бесконечность

HTML
Для создания фигуры «бесконечность», создаем div с ID infinity:

CSS
Фигура «бесконечность» может быть создана путем аккуратной манипуляции свойством border и установки углов окружности:

#infinity { width: 220px; height: 100px; position: relative; } #infinity:before,#infinity:after { content: ""; width: 60px; height: 60px; position: absolute; top: 0; left: 0; border: 20px solid #06c999; -moz-border-radius: 50px 50px 0; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

Бабл для комментария

HTML
Для создания фигуры «библ», создаем div с ID comment_bubble:

CSS
Эта фигура может быть создана путем создания треугольника и задания свойства border radius, а затем присоединения прямоугольника к его левой стороне:

#comment_bubble { width: 140px; height: 100px; background: #088cb7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } #comment_bubble:before { content: ""; width: 0; height: 0; right: 100%; top: 38px; position: absolute; border-top: 13px solid transparent; border-right: 26px solid #088cb7; border-bottom: 13px solid transparent; }

Pacman

HTML
Для создания фигуры «pacman», создаем div с ID pacman:

CSS
Создание pacman – целая хитрость. Манипулируйте свойствами border и radius для создания окружности с открытой левой стороной:

#pacman { width: 0; height: 0; border-right: 70px solid transparent; border-top: 70px solid #ffde00; border-left: 70px solid #ffde00; border-bottom: 70px solid #ffde00; border-top-left-radius: 70px; border-top-right-radius: 70px; border-bottom-left-radius: 70px; border-bottom-right-radius: 70px; }

Заключение

Есть множество возможностей создания фигур с помощью CSS3. Вы можете использовать фигуры как часть вашего дизайна, к тому же у них есть приемлемый «костыль» в случае браузеров эпохи юрского периода, на подобии Internet Explorer.

Надеюсь, вам понравилось данное руководство. В блоке комментариев вы можете приводить собственные способы создания фигур из руководства.

Перевод статьи «Make Shapes with CSS: How to Create Different Shapes in CSS» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: https://www.internet-technologies.ru/articles/sozdaem-geometricheskie-figury-s-pomoschyu-css.html

Совет CSS: лучшее скругление углов

От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?

Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.

Четвертые части каждой окружности формируют закругленные углы элемента.

Когда объединяются толстые рамки

При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

  border: 6px solid crimson;

Пока нет проблем.

Но если установить значение border-width больше border-radius, мы потеряем скругленные углы – края нашего изображения станут квадратными.

  border: 14px solid crimson;

Рамка становится шире, а углы изображения – квадратными.

Почему так происходит?

Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.

Так что, если значение ширины рамки border-width больше border-radius, мы видим эффект четверти радиуса, соединяющего две рамки, которые толще самого радиуса. Обратите внимание на квадратный внутренний радиус:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Чтобы оба радиуса были пропорциональными, нам понадобится подогнать значение радиуса примерно к двойной ширине рамки, или сумме ширины border-width и радиуса рамки border-radius.

  border: 14px solid crimson;

При изменении значения border-radius до 26px мы получаем обратно свои закругленные углы изображения.

Метод Box-shadow

При образовании тени блока тень следует за радиусом рамки элемента. Помня об этом, можно использовать значение дополнительного расширения box-shadow для создания того, что смотрится в точности как рамка.

Расширенный радиус устанавливает растянутый интервал тени блока. Если установить офсеты и размытие на 0, определенное значение расширения сформирует вокруг элемента четкую рамку.

  box-shadow: 0 0 0 14px crimson;

Результат смотрится в точности как пример со стилем рамки. Но теперь нам не нужно беспокоиться о возрастании border-radius каждый раз при увеличении ширины рамки, потому что расширенное значение последует за радиусом.

Применение переменных Sass

Если мы используем препроцессор типа Sass, то для ширины и радиуса рамки можно создать переменные, затем применить простую математическую операцию, которая пропорционально сформирует радиус.

$radius: $border-width*1.9;    border: $border-width solid crimson;

Заключение

Должен предупредить вас насчет указанного здесь метода box-shadow. Так как тени блока не являются частью блочной модели элемента, фальшивые рамки перекрывают части других встраиваемых или «плавающих» элементов, поэтому понадобится компенсировать их с помощью дополнительных полей. Тени блока CSS поддерживаются во всех последних браузерах, включая IE9+.

Источник: https://webformyself.com/sovet-css-luchshee-skruglenie-uglov/

Создаем закруглённые уголки с помощью CSS 3

Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.

Кроссбраузерная совместимость

К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).

Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.

Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome. Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.

В CSS зададим для него высоту, ширину и цвет фона:

#box { width:590px; height:100px;

background-color:#6B86A6; }

Добавляем свойство border-radius:

Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:

#box { -moz-border-radius: 20px;

}

Теперь все четыре угла будут иметь радиус 20px:Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:

#box { -moz-border-radius:20px 40px;

}

Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.

#box { -moz-border-radius:10px 20px 30px 40px;

}

Объявляем свойство border-radius для каждого угла

Если вы хотите использовать это свойство только для одного угла, то достаточно добавить соответствующее окончание к свойству:

  • moz-border-radius-topleft для верхнего левого угла;
  • moz-border-radius-topright для верхнего правго угла;
  • moz-border-radius-bottomright для нижнего правого угла;
  • moz-border-radius-bottomleft для нижнего левого угла;
Читайте также:  Иностранные сайты для заработка

Горизонтальный и вертикальный радиус

Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:

#box { -moz-border-radius-topleft: 30px 15px;

}

Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса. При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:

#box { -moz-border-radius: 30px / 15px; } #box { -moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;

}

Использование свойства border-radius в Safari и Chrome

Safari и Chrome используют немного другой синтаксис, основным отличием является использование префикса -webkit, вместо -moz:

  • -webkit-border-top-left-radius для верхнего левого угла;
  • -webkit-border-top-right-radius для верхнего правого угла;
  • -webkit-border-bottom-right-radius для нижнего правого угла;
  • -webkit-border-bottom-left-radius для нижнего левого угла;

При использовании краткой записи необходимо иметь ввиду, что её можно использовать только когда значения для всех углов равны, если значения разные, то необходимо указывать свойства для каждого угла. Этот код не будет работать в Safari и Chrome:

#box { -webkit-border-radius: 10px 20px 30px 40px;

}

Правильный код будет выглядеть так:

#box { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 30px; -webkit-border-bottom-left-radius: 40px;

}

Горизонтальный и вертикальный радиус в Safari и Chrome

В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:

#box { -webkit-border-top-left-radius: 30px 15px;

}

При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:

#box { -webkit-border-radius: 30px 15px;

}

Примеры.

Источник: https://habr.com/post/66193/

Закругленные углы в CSS

Содержимое блока.

Результат примера

Описание примера

Свойства с префиксами отсутствуют в спецификации CSS, поэтому их использование приведет к невалидному коду.

Закругленные углы в CSS без изображений

В этом примере тоже нет изображений, однако используются дополнительные блоки. Суть метода состоит в том, что перед основным содержимым и после него, указывается несколько блоков, которые по мере удаления от него понемногу уменьшаются в ширине с помощью боковых внешних полей. Благодаря этому и происходит имитация закругления углов.

Данный способ плох тем, что код «замусоривается» дополнительными блоками, но, к сожалению, во многих примерах подобные блоки будут присутствовать. Еще один минус — при больших радиусах закругления придется добавлять еще больше блоков, чем используется в примере.

Пример HTML и CSS: закругление углов без использования изображений

МЕНЮ

Результат примера

Описание примера

Закругленные углы с помощью боковых блоков

В предыдущем примере размер блока у нас был фиксированный и зависел от размера фоновой картинки, а это очень неудобно. Сейчас мы сделаем так, чтобы ширина нашего блока была изменяемой. Для этого вырежем у изображения три части — боковушки и кусочек центра.

Затем поместим внутрь основного блока два элемента с фиксированными размерами, которые, благодаря абсолютному позиционированию, разместим у него по бокам. В качестве фона зададим им те самые боковые части, а основному блоку — центральную часть.

Так у нас получится блок с закругленными углами, у которого будет изменяемая ширина.

Такой прием очень часто используется для закругления однострочных элементов, таких как ссылки или названия разделов/меню.

Пример HTML и CSS: закругление углов с использованием боковых блоков

Содержимое блока.

Результат примера

Описание примера

В IE6 есть пара проблем с этим способом:

Закругленные углы с помощью позиционирования и спрайта

По сути, технология этого способа закругления углов в CSS такая же, как и в предыдущем, поэтому подробные комментарии тут будут опущены.

Единственное отличие — вместо отдельных фоновых изображений-уголков здесь используется одна общая картинка-спрайт.

Благодаря этому ускоряется загрузка сайта, ведь одно изображение «весит» меньше, чем четыре и к хостингу идет одно обращение вместо четырех.

Совет

Спрайт — изображение, которое объединяет в себе сразу несколько картинок используемых в качестве фона для элементов сайта. Какая именно часть спрайта будет фоном у того или иного HTML-элемента зависит от координат заданных в специальном CSS-свойстве.

Пример HTML и CSS: закругление углов с использованием позиционирования и спрайтов

Содержимое блока.

Результат примера

Описание примера

С IE6 здесь те же проблемы, что и в предыдущем примере.

Закругленные углы с помощью псевдоэлементов

В данном примере мы закруглим углы у элемента, который имеет рамку, но это не является какой-то особенностью именно этого способа — вы вполне можете использовать закругление с рамкой и в предыдущих примерах.

Сами закругления мы сделаем, используя псевдоэлементы созданные у основного блока, но без применения к ним позиционирования.

И еще один момент. В предыдущих примерах уголки вырезались вместе с фоном внутри, а это не всегда нужно, особенно, если предполагается, что фон у блока с закругленными углами будет неоднородным.

Поэтому фон внутри рамки здесь был сделан прозрачным (это позволяет формат PNG) и когда вырезали уголки — их внутренняя часть тоже оказалась прозрачной.

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

Пример HTML и CSS: закругление углов с использованием псевдоэлементов

seodon.ru — Закругляем углы в CSS с помощью псевдоэлементов Содержимое блока.

Результат примера

Описание примера

Для IE6 и IE7 мы здесь применили уже знакомые вам «костыли» с внедрением HTML-кода, так как эти браузеры не понимают используемые здесь псевдоэлементы:

Минус этого способа в том, что блоку с закругленными углами нельзя явно задать высоту, ведь если она будет превышать размеры содержимого, то нижние уголки не прижмутся к краям. Этого можно избежать, если все-таки заключить основное содержимое в еще один блок и высоту задавать ему.

Еще один пример закругления углов с псевдоэлементами и без дополнительных блоков

Этот пример похож на предыдущий, но здесь для расстановки псевдоэлементов используется позиционирование. Благодаря такому подходу появилась возможность явно указывать высоту блока с закругленными углами.

Пример HTML и CSS: закругление углов, где можно изменять высоту блока

seodon.ru — Закругляем углы в CSS с помощью псевдоэлементов, где у блока можно задавать высоту Содержимое блока.

Результат примера

Описание примера

Так как этот способ похож на предыдущий, то опишу только их отличия.

И снова для IE6 и IE7 добавляем внутрь основного блока несколько дополнительных элементов с помощью expression, а код закрываем в условные комментарии. Вот только в этот раз мы даже не будем пытаться эмулировать псевдоэлементы, а поступим проще.

К слову сказать, на самом деле проще было бы все-таки эмулировать псевдоэлементы, как мы это сделали в предыдущем примере — так добавочный код был бы меньше. Но только не в IE6, для этого браузера понадобилось бы еще несколько «костылей» и, как следствие, пришлось бы писать два отдельных условных комментария — для IE6 и IE7, а это только раздуло бы код…

В Firefox этот способ работает корректно с версии 3.6, а в Opera — с версии 10.0, костыли для них я придумывать не стал, так как это малоактуально.

Источник: http://seodon.ru/primery/html-css/obshhaja-verstka/zakruglennye-ugly-css.php

Закругленные углы используя CSS

#HTML & CSS

13 ноября 2013

Приветствую, Друзья. Данная статья посвящена  довольно популярной теме среди начинающих вебмастеров — закругленные углы CSS. Вопросы, которые я попытаюсь, раскрыть будут касаться того, как сделать скругленные углы элементов сайта, используя только CSS не прибегая к использованию каких-либо изображений.

В данном способе есть, как плюсы, так и минусы.

Плюсы, конечно же, заключаются в том, что нет необходимости создавать изображения, используя какой-либо графический редактор, загружать их на сервер, а потом расставлять с помощью CSS на необходимые места для создания нужного эффекта. При этом необходимо создавать дополнительные элементы в HTML-коде, а также прописывать отдельные свойства для каждого из них.

Обратите внимание

Что касается минусов, то здесь можно отметить одну проблему — это поддержка данного свойства не всеми веб-браузерами, особенно это касается устаревших версий различных браузеров.

Однако закругление углов с помощью CSS становится все популярнее и популярнее. Как Вы уже могли понять, в данной статье мы будем использовать свойство доступное в CSS 3.

Скругленные углы с помощью CSS

Итак, для примера мы возьмем блочный элемент DIV и сделаем его углы скругленными. Для примера создадим блок, и прямо в HTML-коде будем назначать ему свойства, используя атрибут style. Сначала мы имеем блочный элемент залитый фоном любого цвета:

Кстати, если Вам необходимо узнать какой код цвета у Вас на сайте или на любом другом, Вам пригодится данная статья.

А вот так мы увидим его в веб-браузере:

Теперь, чтобы закруглить углы воспользуемся свойством «border-radius», которое можно перевести, как радиус границы. Да именно так, а не как многие могли подумать, что это радиус рамки или как там его еще называют (border).

Данное свойство отвечает именно за радиус границ элемента, а не за его рамки или бордюры, которых может и не быть. Однако, свойство будет по-прежнему работать и без использования border у элемента. Надеюсь, вы поняли, что я хотел сказать.

Значением для данного свойства являются любые числовые значения, которые применимы в CSS, такие как проценты, пикселы (px), пункты (pt) и так далее.

Да, и следует учитывать, что данное свойство работает сразу на все четыре угла элемента, кроме того, можно указать разный радиус для каждого угла, но об этом чуть позже. Для начала зададим радиус углов нашего прямоугольника. Пусть он будет равен 5 пикселам:

Тогда элемент станет выглядеть так:

Теперь, предлагаю разобраться в том, как добавить свой радиус для каждого угла в отдельности. Для этого мы можем воспользоваться свойством, которое можно применить для каждого угла в отдельности. Если говорить о прошлом примере, то в полном виде свойства для элемента выглядели бы так:

border-top-left-radius:5px; /* верхний левый угол */ border-top-right-radius:5px; /* верхний правый угол */ border-bottom-right-radius:5px; /* нижний правый угол */ border-bottom-left-radius:5px; /* нижний левый угол */

Важно

То есть, если мы хотим задать каждому углу свое значение, мы имеем такую возможность, и чтобы убедиться в этом возьмем следующий код:

И тогда мы получим такой результат:

Как мы можем видеть, для границы каждого угла задано свое значение радиуса.
Кроме того CSS позволяет нам задать значение для границы каждого угла в виде короткой записи, которая будет выглядеть так:

Где значения будут следовать в таком порядке:

border-radius: 5px /* верхний левый угол */ 10px /* верхний правый угол */ 15px /* нижний правый угол */ 20px /* нижний левый угол */;

Соответственно, исходя из выше сказанного, становится понятно, что таким же образом мы можем задать границу радиуса только для трех (одного или двух) углов:

Так это выглядит в веб-браузере:

Если Вы еще не совсем запутались, то продолжим. Дело в том, что радиус для каждой границы угла может быть указан не в одном значении, как мы рассматривали выше, а в двух. То есть два значения для каждого угла. В таком случае первое значение установит радиус для угла по горизонтали, а второе по вертикали. Давайте начнем сначала с одного угла:

Читайте также:  Статистика поисковых запросов

В данном примере мы воздействовали только на левый верхний угол элемента:

Если расставить значения наоборот, тогда элемент станет выглядеть так:

На этом вроде бы можно было бы, и закончить, но нет. Есть еще одна хитрость. В значении свойства мы можем использовать слеш (/) между значениями. Слеш может помочь нам совместить значения с другими значениями.

В общем проще показать, чем рассказать. Начнем с простого. Предположим, что нам необходимо, чтобы по горизонтали радиус был равен 35 пикселам, а по вертикали 5. При этом, чтобы данные значения относились ко всем углам.

Тогда мы можем написать так:

И получить вот такой результат:

Теперь рассмотрим пример посложнее:

В данном случае значение до знака слеша (/) будет иметь отношение к горизонтальному радиусу угла, а после знака к вертикальному. При этом значения будут относиться друг к другу таким образом:

border-top-left-radius: 20px 15px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 40px 15px; border-bottom-left-radius: 10px 25px;

А результат будет таким:

И в завершении статьи поговорим о поддержке различными браузерами данного свойства.

Закругление углов в различных веб-браузерах

Здесь стоит отметить, что данное свойство поддерживается не всеми версиями браузеров. Свойство поддерживается в IE9 +, Firefox 4 +, Chrome, Safari 5 +, и Опера.

Но для некоторых браузеров версии, которых не поддерживают данное свойство, существуют нестандартные свойства, которые добавляют, так называемый префикс или приставку к свойству. Chrome до версии 4.0, Safari до версии 5.

0, iOS используют нестандартное свойство -webkit-border-bottom-left-radius. Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-bottomleft.

Совет

При этом нам придется продублировать свойство, используя данные префиксы. Например, если у нас задано свойство для границы левого верхнего угла значение, которого равно пяти пикселам:

border-top-left-radius: 5px;

Тогда свойство с дублированием его с помощью префиксов будет выглядеть так:

-webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; border-top-left-radius: 5px;

Очень надеюсь, что смог понятно все объяснить и Вам теперь понятно, как сделать закругленные углы, используя только CSS.
Удачи, Вам!

Источник: https://SdelaemBlog.ru/zakruglennye-ugly-css

Создаем закругленные углы на сайте при помощи CSS без применения Javascript

Здравствуйте уважаемые читатели блога dmitriydenisov.com.

Это вторая статья в категории «HTML, PHP, CSS и MySQL» и в ней я хочу рассказать о том, как создать на своем сайте закругленные углы при помощи CSS без применения разнообразных скриптов.

Этот метод очень удобный и я решил написать про него отдельную статью, в которой приведу рабочий пример кода и расскажу, как с ним работать и реализовать на своем сайте закругление углов самостоятельно.

Недавно я занялся усиленной оптимизацией своего сайта и, проанализировав много графиков, выявил, что зачастую виной долгой загрузки являлись Javascript, которые отвечали за создание закругленных углов на моем сайте.

Поначалу я использовал именно этот метод так как для того чтобы его реализовать достаточно было добавить в нужный документ нужное нам правило CSS или класс.

Сделав это, загрузка моих страниц еще больше ускорилась и теперь ее скорость в большей степени зависит только от ситуации на хостинге. На данный момент Page Speed главной страницы моего сайта составляет 86%, что очень даже неплохо.

Подробнее об ускорении своих сайтов вы можете прочитать в статьях «Ускорение загрузки страниц сайта. Оптимизация изображений, css, html и php кода. Настройка .htaccess» и «Оптимизация блога WordPress для снижения нагрузки на сервер».

Итак, для того чтобы создать закругленные углы при помощи CSS вам нужно будет сделать следующее.

Для начала подготовить все необходимое для работы, а именно текстовый редактор NotePad++ для редактирования файлов сайта, FTP клиент для закачки этих файлов на сервер, различные браузеры для проверки правильного отображения и дополнение к Mozilla Firefox под названием FireBug, которое понадобится нам для доведения наших закругленных углов до нормального вида.

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

  1. Открыть таблицу стилей и добавить в него правила CSS для закругленных углов
  2. Добавить код закругленных углов во все необходимые файлы своего сайта.
  3. При помощи дополнения FireBug определить недоработки и устранить их.

Третий пункт очень важен, так как зачастую нужно будет убирать разные отступы и тому подобное. Например, мы создаем закругленные углы для класса, отвечающего за отображение статьи.

У него уже есть свои правила CSS, одним из которых, зачастую, есть верхние отступы. Если их не убрать, то закругленные углы просто не состыкуются с основным блоком и будут висеть над ним.

Все это будет иметь примерно следующий вид.

Как видите это не совсем то, что нам нужно. Для большего удобства работы и более быстрого поиска причины проблемы нам и понадобится FireBug. Скачать его вы можете перейдя по этой ссылке.

Обратите внимание

После установки все что вам понадобится, это нажать на значок в виде жука в правом нижнем углу браузера Mozilla Firefox, после чего нажать на кнопку «Инспектировать объект» и выделить нужную нам часть дизайна на сайте.

В результате справа в нижнем углу браузера вы увидите правила CSS отвечающие за формирование того элемента дизайна, который вы выделили. На этом краткая инструкция по FireBug заканчивается, и мы возвращаемся к созданию закругленных углов для нашего сайта.

Создание правил CSS для закругленных углов

Первым делом нам необходимо создать правила CSS, которые будут определять внешний вид скругленных краев. Для этого откройте таблицу стилей своего сайта и добавьте где-то ближе к верху следующие CSS правила.

.xcorner { background: transparent; margin:0; } .xtop { display:block; background:transparent; font-size:1px; margin-top: 10px; } .xbottom { display:block; background:transparent; font-size:1px; } .xb1, .xb2, .xb3, .xb4 { display:block; overflow:hidden; } .xb1, .xb2, .xb3 { height:1px; } .xb2, .xb3, .xb4 { background:#fff; border-left:1px solid #fff; border-right:1px solid #fff; } .xb1 { margin:0 5px; background:#fff; } .xb2 { margin:0 3px; border-width:0 2px; } .xb3 { margin:0 2px; } .xb4 { height:2px; margin:0 1px; }

Свойство background:#fff; задают цвет фона. В данном случае закругленные края будут иметь белый цвет. При необходимости вы можете изменить его на свой.

border-right:1px solid #fff; — в этом свойстве вы можете изменить цвет закругленных углов с белого #fff на любой другой. Больше никаких изменений вносить я не рекомендую, так как это может нарушить функциональность данного метода создания закругленных углов.

Итак, с таблицами стилей мы разобрались. Теперь переходим к следующему этапу.

Код для создания закругленных углов при помощи CSS

Добавления CSS правил в таблицу стилей недостаточно для придания нашим углам закругленного вида. Для этого нам потребуется добавить специальный код в страницы своего сайта.

Для создания верхних закругленных углов нужно перед нужным вам классом CSS добавить этот код:

А для создания нижних углов вот этот код:

Одним словом вам нужно сделать следующее. Найти блок, углы которого вы хотите закруглить и добавить вышеприведенный код перед началом и сразу в конце нужного вам блока.

Для наглядности наведу пример.

В картинке приведенной выше применен серый цвет фона, а нужный нам текст заключен в теги с классом class=»cornerText». Наглядно это выглядит так:

Текст нашей статьи, который находится в блоке, для которого мы создаем закругленные углы.

Для того, чтобы создать для него закругленные углы нам необходимо сверху и снизу вставить код, который я приводил выше. В итоге у вас должно получиться следующее:

Текст нашей статьи, который находится в блоке, для которого мы создаем закругленные углы.

Естественно я не приводил весь код, а обрезал его, поставив три точки, чтобы уменьшить объем статьи. Вам же нужно будет вставлять код целиком. Надеюсь, суть этого метода вам понятна.

На этом я заканчиваю статью о создании закругленных углов для сайта. Если у вас остались какие-то вопросы по ней вы всегда можете задать их в комментариях.

На этом все. Удачи вам и до скорых встреч на страницах блога.

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Источник: https://archive.dmitriydenisov.com/sozdaem-zakruglennye-ugly-na-sajte-pri-pomoshhi-css-bez-primeneniya-javascript/

Скругление углов CSS3

Сегодня хочу рассказать о таком свойстве CSS3, как border-radius, позволяющее создать закругленную границу вокруг прямоугольного блока.

Backgrounds and Borders module на данный момент всё ещё остается черновым документом W3C, поэтому при именовании свойства border-radius браузеры используют вендорные префиксы:

  • -moz- используется в браузерах на основе движка Gecko (Firefox и SeaMonkey)
  • -webkit- в браузерах на основе одноименного движка (Safari и Chrome)

Браузер Opera обходится без вендорного префикса, ну а IE, оправдывая своё народное название «осла», вовсе не поддерживает данного свойства.

Скругление углов средствами CSS3. В данном примере не используется JS или картинки.

Для скругления углов, как в примере выше, элементу div были назначены следующие свойства: ширина бордюра 5 пикселей, радиус скругления углов 20 пикселей. Причем для правильного отображения в разных браузерах были добавлены вендорные префиксы.

border:5px solid #545751;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;

Важно

В этом примере свойство border-radius используется в простейшей форме, закругляя все четыре угла блока с одинаковым радиусом. Можно задать каждому углу свой радиус скругления, перечисляя значения начиная сверху и по часовой стрелке.

При указании двух или трех значений, пропущенные значения берутся из противоположных углов (top, right, bottom, left). Следующие примеры буду писать без вендорных префиксов, собственно подставить их не трудно.

border-radius:0 20px;

border-radius:25px 0 10px 0;

C этим, полагаю разобрались, ничего сложного тут нет. Более интересная задача — скругление углов у изображений.

Задача интересна прежде всего тем, что нужно добиться скругления углов у изображения ещё и с определенной рамкой, не зависимо от фона и размеров картинки, и возможностью задавать радиус скругления. На первый взгляд задача не выполнимая.

Берем любую картинку и пробуем в лоб применить к ней свойство border-radius.

CSS код:

.img-radius { border:2px solid #222; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;
}

Получили явно не то, что ожидали, бордюр со скруглением есть, а вот картинка как была, так и осталась…

Решение довольно простое — предлагаю использовать картинку в качестве фона элемента div.

Вот теперь получили желаемый результат — скругление работает. Смущает один момент, а именно необходимость вручную указывать размеры картинки.

Чтобы этого не делать, вставим внутрь нашего блока ту же картинку с указанием ей свойства visibility:hidden, т.е. сделаем её невидимой. В результате картинка будет распирать содержащий её контейнер и сама задаст необходимые размеры нашему блоку с бэкграундом.

CSS код:

.img-radius { border:border:2px solid #222; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;
}
.img-radius img { display: block; visibility: hidden;
}

Совет

И напоследок про костыли для IE. Даже это тупое животное можно научить закруглению углов, но тут не обойтись без сторонней библиотеки CSS3 Pie. Данная библиотека реализует многие CSS3 свойства в IE6-8, в том числе и border-radius (кстати, весит всего 28Кб). Для её подключения потребуется в CSS классу .img-radius добавить строчку:

.img-radius { … behavior: url(css/PIE.htc);
}

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Лучшие слайдеры (слайдшоу) на jQueryОтменили региональный домен nnov.ruСразу после «России» был продан «секс»: как зарождался домен «.РФ»Яндекс приглашает на седьмую Вебмастерскую200 конструкций эффективных заголовковПокупаем ссылки в SAPE. Руководство для начинающих

Источник: https://mdex-nn.ru/page/skruglenie-uglov-css3

Ссылка на основную публикацию