DWWEB.RU
СКРИПТЫ

Как сделать горизонтальную линию в 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 ;"

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

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

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