<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

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

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Закруглённые углы на CSS3.

Закруглённые углы на CSS3.

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

Для начала создадим простенькую html разметку

<html>
<head>
  <title>border-radius</title>
  <meta charset="utf-8">
</head>
<body>
  <div class="block"></div>
</body>
</html>

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

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;
}

Вот, что мы имеем сейчас

базовый блок

Давайте скруглим углы блока на 10px

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-radius: 10px;
}

скруглённый блок

Чтобы скруглить все углы, мы добавили свойство border-radius с единственным значением 10px, но мы можем задать для каждого угла своё скругление. Для этого просто перечислим 4 значения для верхнего левого, верхнего правого, нижнего правого и нижнего левого угла.

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-radius: 10px 20px 30px 40px;
}

скруглённый блок с разными значениями

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

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-top-left-radius: 10px; // верхний левый угол
  border-top-right-radius: 20px; // верхний правый угол
  border-bottom-right-radius: 30px; // нижний правый угол
  border-bottom-left-radius: 40px; // нижний левый угол
}

"Зачем это нужно, если у нас есть сокращённая форма?" - Чтобы ответить на этот вопрос, давайте рассмотрим пример

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-bottom-right-radius: 20px 40px;
}

неравномерное скругление

Как видно из скриншота, наш правый нижний угол закруглён неравномерно. Т.е. по вертикали угол закруглился на 40px, а по горизонтали на 20px. Данный способ используется, когда вам нужно сделать какую-нибудь очень сложную фигуру на CSS, в остальных случаях вполне хватает сокращённой формы.

И последнее: вы можете указывать радиус закругления не только в пикселях, но и в процентах. Например, давайте сделаем идеальный круг. Для этого зададим всем углам радиус скругления 50%

.block {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: #777;

  border-radius: 50%;
}

идеальный круг

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (5):

maxsaenko maxsaenko 07.04.2014 10:02:43

Да. Такое свойство как border-radius мне давно известно, но, я так понимаю, что не все браузеры его "хавают". Как быть с -moz-border-radius? -webkit-border-radius, -khtml-border-radius. Понятно, что это прописывается для мозиллы, хрома и пр. Или все-таки можно обойтись только border-radius!?

Ответить

razor2211 razor2211 07.04.2014 10:55:17

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

Ответить

maxsaenko maxsaenko 07.04.2014 16:09:39

Спасибо... я как-то это пропустил...

Ответить

sergkosm sergkosm 08.10.2014 00:31:42

я пока все равно добавляю все эти префиксы)) на всякий случай

Ответить

Diver2103 Diver2103 31.03.2016 15:22:02

Здравствуйте, будет ли работать border-radius для фона при border-collapse:collapse? и если да, будет ли скругление фона отображаться корректно для разных браузеров/гаджетов?

Ответить

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