Создание круга в CSS: совместимое решение без JS и изображений

Пройдите тест, узнайте какой профессии подходите
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для создания идеального круга установите для элемента div равные значения ширины и высоты, а затем примените свойство border-radius: 50%. Включите фон, чтобы круг был видим:

CSS
Скопировать код
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
}

Внесите этот код в ваш HTML:

HTML
Скопировать код
<div class="circle"></div>

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

Пошаговый план для смены профессии

Продвинутые приемы со CSS

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

Тень как аура круга

Применив свойство box-shadow, вы сможете придать кругу объемный вид:

CSS
Скопировать код
.circle {
  /* ...остальные стилевые свойства... */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Декорирование с использованием псевдоэлементов

Псевдоэлементы вроде :before или :after позволят добавить к кругу дополнительные формы или слои:

CSS
Скопировать код
.circle:before {
  content: '';
  /* ...дополнительные стилевые свойства... */
  border-radius: 50%;
  z-index: 1;
}

Адаптивные размеры

Примените единицы измерения, такие как em, vw или %, вместо статичных пикселей, чтобы круг оставался корректно отмасштабированным на различных устройствах:

CSS
Скопировать код
.circle {
  width: 10vw;
  height: 10vw;
  /* ...другие свойства... */
}

Визуализация

Правильное использование концепции формы и свойства border-radius играет важную роль при создании круга средствами CSS:

Markdown
Скопировать код
Представьте свой HTML-элемент в виде квадрата (🖼️):

🖼️: [🟥🟥🟥🟥]
    [🟥🟥🟥🟥]
    [🟥🟥🟥🟥]
    [🟥🟥🟥🟥]

Свойство 'border-radius' выступает здесь как волшебный инструмент:

🎨: { border-radius: 50%; }

Оно преобразует ваши действия и делает квадрат таким:

Markdown
Скопировать код
🎨 в процессе:
🟢🟢🟢🟢
🟢⚪⚪🟢
🟢⚪⚪🟢
🟢🟢🟢🟢

Углы квадрата становятся скруглёнными, и в итоге мы видим круг (⚪) внутри прямоугольника (🟢).

Поддержка кроссбраузерности

Присутствие правильного отображения CSS-кругов во всех браузерах — это ключ к доступности дизайна:

Поддержка старых браузеров

Добавьте префиксы -moz- и -webkit-, чтобы обеспечить совместимость со старыми версиями Firefox и Safari:

CSS
Скопировать код
.circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

Резервный план для устаревших версий IE

Для IE8 и более старых версий можно использовать псевдоэлемент :before и код символа Unicode (●):

CSS
Скопировать код
.circle:before {
  content: "\25CF";
  font-size: 50px;
  line-height: 50px;
}

Альтернатива: использование символьных HTML-кодов

Символ &#8226; можно использовать в случае, когда вам необходим минимум CSS:

HTML
Скопировать код
<span>&#8226;</span>

Стлизовать такой символ можно с помощью свойств font-size и color, что позволит создать простой круг.

Полезные материалы

  1. Формы в CSS – CSS | MDN — подробное руководство по формам в CSS.
  2. Фигуры CSS | CSS-Tricks — информация о создании различных форм используя чистый CSS.
  3. Как создать круг | W3Schools — полезное пошаговое руководство по созданию идеальных кругов c использованием CSS.
  4. border-radius | CSS-Tricks — полное руководство по использованию свойства border-radius.
  5. Свойство border-radius в CSS | W3Schools — детальное пособие от W3Schools, посвященное использованию border-radius.
  6. Анимация форм CSS | CSS-Tricks — обсуждения на форуме, посвященном анимации форм с помощью CSS.
  7. Введение в анимацию CSS для начинающих | Envato Tuts+ — курс по анимации с использованием CSS для начинающих.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой стиль необходимо применить к элементу, чтобы создать круг в CSS?
1 / 5