Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Хотите получать заявки моментально? Вся наша команда и партнеры приступят к проекту, подключив также продвижение Авито. Подходит для тех, кого не удовлетворяет имеющийся объем продаж. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение + Авито продвижение.

от 189000 

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.

от 32900 

Как сделать окружность css

Окружность в CSS можно создать несколькими способами.

Способ 1: при помощи свойств border-radius и width (или height) с одинаковыми значениями.

HTML:

<div class="circle"></div>

CSS:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
}

В данном примере мы создали div элемент с классом circle, задали ему свойство border-radius: 50%, чтобы сделать элемент круглым, и свойства width и height с одинаковыми значениями, чтобы задать размеры круга. Также задали цвет фона с помощью background-color.

Способ 2: при помощи свойства border-radius и padding с одинаковыми значениями.

HTML:

<div class="circle"></div>

CSS:

.circle {
  border-radius: 50%;
  padding: 50px;
  background-color: green;
}

В данном примере мы использовали свойство padding, чтобы задать размеры круга. Также задали цвет фона с помощью background-color.

Способ 3: при помощи псевдоэлемента ::before и свойства content.

HTML:

<div class="circle"></div>

CSS:

.circle {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
}

.circle::before {
  content: '';
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: inherit;
}

В данном примере мы создали элемент div с классом circle и задали ему свойства width, height и background-color, а также свойство position: relative для задания координат псевдоэлемента. Далее мы создали псевдоэлемент ::before и задали ему свойства content: », border-radius: 50%, width и height в 100%, чтобы сделать его круглым. Затем мы задали свойство position: absolute, чтобы закрепить псевдоэлемент с левым верхним углом своего родительского элемента. Свойством top и left задали координаты, соответствующие краям элемента, а свойством background-color: inherit унаследовали цвет фона у родительского элемента.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

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

Меню

Оставить заявку

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