Как сделать круг в css
Узнайте, как использовать CSS для создания круга с примером кода, чтобы улучшить дизайн и внешний вид вашего сайта.
Создание круга в CSS довольно простое. Все, что вам нужно сделать — это использовать свойство border-radius
со значением в пикселях.
.circle {
border-radius: 50px; /* Значение должно быть равным половине ширины и высоты элемента */
}
Вы можете использовать проценты для задания радиуса, в зависимости от размеров родительского элемента.
.circle {
width: 200px;
height: 200px;
border-radius: 50%; /* Теперь значение равно половине ширины и высоты */
}
Вы также можете использовать несколько радиусов для задания более сложных форм, таких как эллипсы, овалы или прямоугольники с скругленными углами.
.ellipse {
border-radius: 50px / 100px; /* Первое значение — это радиус по горизонтали, а второе — радиус по вертикали */
}
Смешивание радиусов углов
Еще один интересный способ создания кругов — использование двух различных значений для радиусов углов. Вы можете использовать этот трюк, чтобы создать круг с закругленными краями. В этом случае вам понадобятся четыре значения, одно для каждого угла.
.rounded-circle {
border-radius: 25px 50px 75px 100px; /* Значения указываются по часовой стрелке, сверху вниз */
}
Еще один пример использования различных радиусов углов — это создание круга с закругленными краями. Для этого вам потребуются два значения, одно для верхних и нижних углов, а второе для левых и правых.
.rounded-circle {
border-radius: 25px 50px; /* Значение для верхнего и нижнего угла слева направо */
}
Вы также можете использовать для указания радиусов ключевое слово inherit
, чтобы они наследовали значение от родительского элемента.
.circle {
border-radius: inherit; /* Радиусы углов будут наследоваться от родительского элемента */
}
Наконец, вы можете использовать встроенные утилиты, такие как CSSmatic Border Radius Generator, чтобы просто построить и протестировать необходимые вам формы.