Главная
Друзья! Пожалуйста не нервничайте! Скоро все заработает... у нас генеральная уборка...

Как сделать горизонтальную линию в css

Как вообще можно сделать линию горизонтальную через css!? Давайте попробуем сделать несколько вариантов линий!

Линия html css

Первое, что сразу приходит на ум это специальный тег, который и сможет сделать нам и показать на экране линию горизонтальную – это конечно не css, но не упомянуть этот вариант никак нельзя!

По умолчанию, конечно же тег "hr" - это простая черная линия, но здесь у нас на сайте она модифицирована и будет отличаться от вида по умолчанию

1. A.

Код:

hr {

background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), transparent);

border: 0;

height: 1px;

margin: 22px 0 22px 0;box-sizing:

content-box;

display: block;

}

Тег:

<hr>

Результат:


B.

Но как бы выглядела данная горизонтальная линия(тег hr) по умолчанию!?

Код:

hr {

display: block;

unicode-bidi: isolate;

-webkit-margin-before: 0.5em;

-webkit-margin-after: 0.5em;

-webkit-margin-start: auto;

-webkit-margin-end: auto;

overflow: hidden;

border-style: inset;

border-width: 1px;

}

Результат:

Ещё: Чуть ниже мы будем использовать начертание горизонтальной линии solid. Есть еще несколько разновидностей начертания:
<div style="border-bottom: dotted 2px #d71212;">dotted</div>

<div style="border-bottom: dashed 2px #9EC1D4;">dashed</div>

<div style="border-bottom: double 5px #9EC1D4;">double</div>

<div style="border-bottom: groove 5px #9EC1D4;">groove</div>

<div style="border-bottom: ridge 5px #9EC1D4;">ridge</div>

2.

Как сделать линию вертикальную!?

К примеру – давайте сделаем блок, а вся страница состоит из блоков.

Код:

<div class="example_block">Здесь содержимое</div>

.example_block {

background: #f9ff00;

width: 100%;

height: 100px;

border-left: 2px solid #010101;

}

Где:

border-left: 2px solid #010101; - это и будет ваша вертикальная линия.

И:

border-right - линия справа border-top - линия сверху border-bottom -линия снизу 2px - толщина линии solid - начертание линии - сплошное #010101 - цвет линии - генератор цвета

Результат:

Здесь содержимое

Толщина линии css

Единица измерения толщины лини может отличаться, но обычно толщину меряют в пикселях – px.

Далее 2px – это толщина линии…

border-left: 2px solid #010101;

Длина линии css

Для того, чтобы сделать определённую длину линии нужно ей поставить значение - width

Естественно надо понимать, если вы собираетесь делать длину линии, не важно – это будет вертикальная или горизонтальная линия, то лучше всего линию выделить в отдельный, например div или тег…

Код:

<div style="border-bottom: dotted 2px #d71212; width: 500px;">Длина линии  - width: 500px;</div>

Результат:

Длина линии - width: 500px;