Как сделать разделяющую линию на css?

Пользователь

от linnea , в категории: HTML/CSS , 6 месяцев назад

Как сделать разделяющую линию на css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от steve , 6 месяцев назад

@linnea 

Для создания разделяющей линии на CSS можно использовать несколько подходов:

  1. Горизонтальная линия:
1
2
3
.separator {
  border-top: 1px solid #000; /* цвет и толщина линии */
}


  1. Вертикальная линия:
1
2
3
4
.separator {
  border-left: 1px solid #000; /* цвет и толщина линии */
  height: 100px; /* высота линии */
}


  1. Двойная линия:
1
2
3
4
.separator {
  border-top: 1px solid #000; /* цвет и толщина верхней линии */
  border-bottom: 1px solid #000; /* цвет и толщина нижней линии */
}


  1. Пунктирная линия:
1
2
3
.separator {
  border-top: 1px dashed #000; /* цвет и толщина пунктирной линии */
}


Пример использования:

1
<div class="separator"></div>


1
2
3
.separator {
  border-top: 1px solid #000;
}


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