Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!!

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

В css есть специальный тег, который и обозначает и выводит горизонтальную линию! Это иногда бывает очень полезным!

Навигация по странице :
  1. Горизонтальная линия тег hr
  2. Стилизация тега hr горизонтальной линии css
  3. Горизонтальная линия сплошная - solid
  4. Горизонтальная линия точками - dotted
  5. Горизонтальная линия пунктирная - dashed
  6. Горизонтальная линия сплошная двойная - double
  7. Горизонтальная линия с тенью сверху - groove
  8. Горизонтальная линия с тенью снизу - ridge
  9. Горизонтальная линия под текстом css

    Горизонтальная линия html hr

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

    Код горизонтальной линии специальный тег hr

    ВНИМАНИЕ! Данный код css тега hr, что приведен ниже - никуда вставлять и копировать не нужно - этот код приведен для понимания, что браузер будет выдавать если он встретит тег <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;

    }

    Результат вывода тега hr горизонтальной линии


    Стилизация тега hr горизонтальной линии css

  2. Но здесь у нас на сайте горизонтальная линия тега hr модифицирована и будет отличаться от вида по умолчанию

    Код горизонтальной линии специальный тег hr стилизация css

    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>

    Результат вывода тега hr горизонтальной линии



    Горизонтальная линия сплошная - solid

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


    Горизонтальная линия точками - dotted

  4. Что такое dotted - если мы применим к свойству border-bottom значение dotted, то получим горизонтальную линию точками <div style="border-bottom: dotted 2px #d71212;">dotted</div>

    Горизонтальная линия пунктирная - dashed

  5. dashed - это значение для свойства border-bottom - которое сделает нашу горизонтальную линию пунктирной <div style="border-bottom: dashed 2px #9EC1D4;">dashed</div>

    Горизонтальная линия сплошная двойная - double

  6. Значение double - делает горизонтальную линию двойной

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


    Тень для горизонтальной линии - groove

  7. Тень для линии - groove, вообще groove переводиться паз, вид линии получается с тенью, groove - тень сверху горизонтальной линии

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

    Горизонтальная линия с тенью снизу - ridge

  8. Тень для линии - ridge, вообще ridge переводится хребет, вид линии получается с тенью, ridge - тень снизу горизонтальной линии

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

    Горизонтальная линия под текстом css

  9. Это просто! Выбираем див либо другой двойной тег, в котором будет находиться текст и присваиваем ему любое свойство из выше перечисленных.
    Например этот текст помещен в тег div и применим к нему style="border-bottom: ridge 2px red ;"


Вас может еще заинтересовать список тем : #HTML | #CSS | #CSS_SHAPE |
Последняя дата редактирования : 2020-02-08 09:55
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
линия csscss линия горизонтальнаякак сделать линию в cssлиния html cssпунктирная линия cssволнистая линия csscss нарисовать линию как сделать горизонтальную линию в css линия под текстом csscss горизонтальная линиясss стили для горизонтальных линийкак вставить линию в csshtml двойная линияhr линия cssлинии в css примеры

Последние комментарии :
Марат :
21/10/2020 12:15
Поиск по словам... м...м... может быть... не задумывался... в принципе скрипт поиска есть, надо подумать, как это…
подробнее.
Anton :
21/10/2020 09:29
Как добавить картинку (с ПК), видео (с хостинга или ПК) ?Будет ли поиск по словам в комментариях…
подробнее.
Марат :
15/10/2020 03:29
Сегодня нам дали очередную десяточку к "ИКС" - у, теперь…
подробнее.
Марат :
15/10/2020 03:16
Здравствуйте. Первое, что на ум пришло по вашему вопросу:Найти первое повторяющееся слово и выделить…
подробнее.
Майя :
15/10/2020 11:14
Добрый день, не могли бы вы подсказать, как выделить только первое или, например , только второе одинаковое…
подробнее.