ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

Как сделать горизонтальную линию в 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;
С вашими куками, что-то не то..., попробуете перезагрузить страницу..
Теги:
линия csscss линия горизонтальнаявертикальная линия cssкак сделать линию в cssлиния html cssпунктирная линия cssволнистая линия csscss нарисовать линиюcss линии таблицытекст в линию csscss цвет линиитолщина линии cssдлина линии cssэлементы в линию cssкак сделать горизонтальную линию в csscss список в линиюлиния под текстом csscss базовая линияcss ширина линиианимация линии css

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) https://dwweb.ru/ http://calc.dwweb.ru/ http://kod.dwweb.ru/ http://marrex.ru/ http://pro.dwweb.ru/ https://f0rlink.com/ https://comments.dwweb.ru youtube Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019