| | | | | |
Как сделать горизонтальную линию в css
2018/07/16
Марат
1059
0
HTML | 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