Красивая горизонтальная линия с помощью CSS

Чтобы создать красивую горизонтальную линию с помощью CSS, лучше всего использовать тег <hr> и стилизовать его, сбросив стандартные стили браузера и применив свои собственные.

Ниже приведены несколько примеров стилей.

1. Простая, тонкая линия с цветом

Это базовый подход, который работает везде и выглядит чисто.

HTML:

<hr class="simple-line">

CSS

.simple-line {
border: none; /* Сбрасываем стандартную границу */
height: 1px; /* Задаем толщину */
background-color: #ccc; /* Задаем цвет */
margin: 20px 0; /* Добавляем отступы сверху и снизу */
}

2. Линия с мягким градиентом (эффект затухания)

Этот эффект создает иллюзию, что линия затухает по краям, что придает ей элегантности.

HTML:

<hr class="gradient-line">

CSS:

.gradient-line {
border: none;
height: 1px;
/* Используем линейный градиент */
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); margin: 20px 0;
}

3. Линия с тенью

Добавление небольшой тени может придать линии глубины.

HTML:

<hr class="shadow-line">

CSS:

.shadow-line {
border: none;
height: 1px;
background-color: #ccc;
/* Добавляем тень: смещение по x, смещение по y, размытие, цвет */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
margin: 20px 0;
}

4. Пунктирная/штриховая линия

Иногда требуется более декоративный стиль линии.

HTML:

<hr class="dotted-line">

CSS:

.dotted-line {
border: none;
border-top: 3px dotted #999; /* Используем верхнюю границу с пунктирным стилем */
height: 1px;
margin: 20px 0;
}