Css пунктирная линия: border-bottom-style | htmlbook.ru

Leave a Comment / Css / By alexxlab / 05.04.2023

Содержание

border-bottom-style | htmlbook.ru

Management

Значения свойств

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	Нет
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#border-style-properties

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает стиль границы внизу элемента.

Синтаксис

Значения

none: Линия не отображается и значение ее толщины обнуляется.
hidden: Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще.
dotted: Линия состоящая из набора точек.
dashed: Пунктирная линия, состоящая из серии коротких отрезков.
solid: Сплошная линия.
double: Двойная линия.
groove: Создает эффект вдавленной линии.
ridge: Создает эффект рельефной линии.
inset: Псевдотрехмерная линия.
outset: Псевдотрехмерная линия.
inherit: Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-style</title>
  <style>
   #panel {
    background: #ccc; /* Цвет фона */
   } 
   #panel p {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
   }
   #title {
    background: navy; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom-width: 2px; /* Толщина линии внизу */
    border-bottom-style: solid; /* Стиль линии внизу */
    border-bottom-color: white; /* Цвет линии внизу */
   }
  </style>
 </head>
 <body>
  <div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.  </p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-bottom-style

Объектная модель

[window.]document.getElementById(«elementID»).style.borderBottomStyle

Браузеры

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Границы

border-bottom-style ⚡️ HTML и CSS с примерами кода

Свойство border-bottom-style устанавливает стиль границы внизу элемента.

Фон

border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style

border-right-width
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
box-shadow

Синтаксис

/* Keyword values */
border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;
/* Global values */
border-bottom-style: inherit;
border-bottom-style: initial;
border-bottom-style: unset;

Значения

none: Линия не отображается и значение её толщины обнуляется.
hidden: Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще.
dotted: Линия состоящая из набора точек.
dashed: Пунктирная линия, состоящая из серии коротких отрезков.
solid: Сплошная линия.
double: Двойная линия.
groove: Создает эффект вдавленной линии.
ridge: Создает эффект рельефной линии.
inset: Псевдотрехмерная линия.
outset: Псевдотрехмерная линия.

Вид указанных стилей представлен на рис. 1.

Значение по-умолчанию: Нет

Применяется ко всем элементам

Спецификации

CSS Backgrounds and Borders Module Level 3
CSS Level 2 (Revision 1)

Описание и примеры

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-bottom-style</title>
    <style>
      . panel {
        background: #ccc; /* Цвет фона */
      }
      .panel p {
        padding: 5px; /* Добавляем поля */
        margin: 0; /* Убираем отступы у абзаца */
      }
      .title {
        background: navy; /* Цвет фона */
        color: white; /* Цвет текста */
        border-bottom-width: 2px; /* Толщина линии внизу */
        border-bottom-style: solid; /* Стиль линии внизу */
        border-bottom-color: white; /* Цвет линии внизу */
      }
    </style>
  </head>
  <body>
    <div>
      <p>Флэнжер</p>
      <p>
        Флэнжер изящно дает конструктивный рефрен, потому
        что современная музыка не запоминается.
      </p>
    </div>
  </body>
</html>

css — Как добавить пунктирную линию после текста?

Задай вопрос

спросил 5 лет, 8 месяцев назад

Изменено 5 лет, 8 месяцев назад

Просмотрено 15 тысяч раз

Мне нужна пунктирная линия после текста. Пунктирная линия должна быть до конца строки. В приведенном ниже примере после текста «Организация/Агентство» должна начинаться пунктирная линия, которая должна продолжаться до конца строки. С приведенный ниже код, я также получаю пунктирную линию под текстом, а это не то, что я хочу.

 Организация/Агентство................................................... ....

Я пробовал, как показано ниже.

 .horizontal_dotted_line {
  нижняя граница: 1 пиксель с черными точками;
  ширина: 200 пикселей;
}

 <дел>
  Организация/Агентство

Но я получаю результат

 Организация/Агентство
.................................................

Мой требуемый вывод Организация/Агентство……………………………………………

Вы можете использовать псевдоэлемент :after для пунктирной линии, а также установить display: flex для родительского элемента. С flex: 1 на псевдоэлементе он займет оставшуюся свободную ширину.

 .horizontal_dotted_line {
  дисплей: гибкий;
  ширина: 300 пикселей;
  граница справа: 1 пиксель сплошной черный;
  граница слева: 1px сплошной черный;
  отступ: 5px;
}
.horizontal_dotted_line: после {
  нижняя граница: 1 пиксель с черными точками;
  содержание: '';
  гибкий: 1;
}

 Организация/Агентство
Лорем

 .horizontal_dotted_line{
     ширина: 200 пикселей;
     дисплей: гибкий;
    }
    .точка{
      гибкий: 1;
      нижняя граница: 1 пиксель с черными точками;
      высота: 0,6 см;
    }

 Организация/Агентство

Это лучший способ, попробуйте.

 .horizontal_dotted_line {
    положение: родственник;
}
.horizontal_dotted_line диапазон {
    отображение: встроенный блок;
    фон: #fff;
    положение: родственник;
    z-индекс: 1;
}
. horizontal_dotted_line: после {
    содержание: '';
    положение: абсолютное;
    верх: 50%;
    слева: 0;
    справа: 0;
    z-индекс: -1;
    граница сверху: 1 пиксель с черными точками;
}

 <дел>
  Организация/Агентство

Очень просто. Псевдоэлемент :after.

 раздел {
  дисплей: гибкий;
  ширина: 300 пикселей;
}

раздел: после {
  нижняя граница: 1 пиксель с черными точками;
  содержание: '';
  гибкий: 1;
}

 <дел>
  Организация/Агентство

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как добавить автоматические пунктирные линии выноски между текстом в Divi

В этом уроке я покажу вам, как добавить автоматические пунктирные линии выноски между текстом в Divi, что идеально подходит для меню ресторана.

Категории: Divi Уроки CSS

Создание красивых меню ресторана

Я люблю делать уроки по Divi, а также по CSS и jQuery. В этом руководстве рассказывается об уловке CSS, позволяющей добавить начальные пунктирные линии и создать список вещей с текстом метки слева и текстом значения справа. Наиболее очевидным вариантом использования этого является меню ресторана, но есть и другие вещи, которые вы можете использовать с ним. В этом уроке я покажу вам, как добавить автоматические пунктирные линии выноски между текстом в Divi.

Присоединяйтесь к подписчикам на нашем канале YouTube и наслаждайтесь другими видеоуроками Divi!

Подписка на YouTube

1. Настройка списка элементов

Первым шагом в этом руководстве является настройка списка элементов путем добавления метки и текста значения. Как это будет работать, вам нужно добавить элементы в виде неупорядоченного списка или маркированного списка. Для каждого элемента списка маркеров добавьте текст метки, который будет слева, а также текст значения, который будет справа. Теперь важной частью является добавление тегов span к каждому из них. Это довольно легко сделать, и как только вы сделаете это, вы сможете скопировать и вставить его для других.

Теперь важно добавить теги span к каждому из них. Это довольно легко сделать, и как только вы сделаете это, вы сможете скопировать и вставить его для других. Для этого переключитесь на вкладку «Текст», которая на самом деле является вкладкой «HTML». Это позволит вам увидеть HTML, который нам нужно отредактировать. Загляните внутрь

(элемент списка), и вы увидите свой текст. Добавьте до и после текста метки и сделайте то же самое для текста значения.

Если вам нужна помощь, посмотрите видео. Мы также включили HTML-версию элемента списка, которую вы можете скопировать ниже.

HTML каждого элемента списка

 LABELVALUE

2. Добавьте пользовательский класс CSS в модуль Divi

Есть один еще один шаг, который нужно сделать, находясь внутри этой вкладки «Текст». Вам нужен класс CSS, чтобы фрагмент кода, который мы добавляем на шаге №3, соединялся со списком маркеров, который вы только что добавили на шаге №1. Мы могли бы сделать это с помощью немного другого процесса, добавив класс в основной модуль, но этот подход позволяет вам использовать это руководство в любом модуле, ориентируясь на маркированный список, а не на модуль.

Перейдите к

HTML-код неупорядоченного списка

3. Добавьте пользовательский фрагмент кода CSS

Теперь пришло время проделать настоящий трюк, добавив код, который создает начальный пунктирный код. единицы и распространяет метку и текст значения на каждую сторону. Код немного сложен, так что извините, но на этот раз я не буду долго его объяснять. Просто скопируйте и вставьте!

Если вы используете нашу бесплатную дочернюю тему Divi , поместите этот фрагмент в файл style.css . В противном случае поместите его в поле Divi>Параметры темы>Пользовательский код CSS . Если вам нужна помощь, ознакомьтесь с нашим полным руководством по

Где добавить пользовательский код в Divi

 ul.pa-dot-лидеры {
    максимальная ширина: 40em;
    заполнение: 0;
    переполнение-x: скрыто;
    стиль списка: нет}
ul.pa-dot-лидеры li:before {
    плыть налево;
    ширина: 0;
    пробел: nowrap;
    содержание:
 «………………………………………………………………………………………………………………. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..................................................................
}
ul.pa-dot-leaders span:first-child {
    заполнение справа: 0,33 em;
    фон: белый}
ul. pa-dot-leaders span + span {
    поплавок: справа;
    отступ слева: 0,33 em;
    фон: белый}

Обязательно посмотрите видео, чтобы увидеть все это в действии, так как этот урок немного сложнее, чем обычно. Дайте мне знать в комментариях, понравилось ли вам это!

Последнее обновление 2 августа 2022 г., 1:47

Вот и все!

, пожалуйста, подпишитесь

тонн учебных пособий в процессе

Каждый месяц мы рассылаем по электронной почте информационный бюллетень с последними учебными пособиями, обновлениями продуктов, полезными ресурсами и любыми другими отраслевыми или личными новостями. Иногда мы отправляем дополнительное отдельное электронное письмо здесь и там, если просто не можем ждать! Вот что вы получите, если подпишетесь, и вы всегда сможете отказаться от подписки в любое время, если просто больше не можете этого терпеть 🙂

Имя

Фамилия

Пожалуйста, поделитесь этим постом!

Фейсбук

Твиттер

Пинтерест

Нельсон — владелец компании Pee-Aye Creative в прекрасном штате Пенсильвания. Он любит помогать малому бизнесу, исследовать природу, создавать веб-сайты с помощью Divi и учить других.

Календарь событий Divi
Рейтинг 5,00 из 5
Легко интегрируйте плагин Календарь событий с Divi и отображайте и настраивайте свои события с помощью красивых модулей Divi!
От: 45,00 $ / год
Курс Divi для начинающих
С рейтингом 5,00 из 5
Начните создавать удивительные веб-сайты Divi с помощью нашего полного учебного курса для начинающих с 4,5 часами видео и письменных материалов!
От: 47,00 $ / год
Divi Carousel Maker
Rated 5,00 из 5
Создавайте красивые карусели из любых модулей Divi, включив переключатель и изменив настройки дизайна!
От: 25,00 $ / год
Помощник по контактной форме Divi
С рейтингом 5,00 из 5
Обновите контактную форму Divi с множеством новых настроек и дополнительных функций, таких как загрузка файлов, выбор даты и времени, настраиваемая строка темы, электронные письма с подтверждением, интеграция с Zapier, сохранение отправленных материалов.

Css пунктирная линия: border-bottom-style | htmlbook.ru

border-bottom-style | htmlbook.ru

Management

Значения свойств

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

border-bottom-style ⚡️ HTML и CSS с примерами кода

Синтаксис

Значения

Спецификации

Описание и примеры

css — Как добавить пунктирную линию после текста?

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

Как добавить автоматические пунктирные линии выноски между текстом в Divi

Создание красивых меню ресторана

1. Настройка списка элементов

HTML каждого элемента списка

2. Добавьте пользовательский класс CSS в модуль Divi

HTML-код неупорядоченного списка

3. Добавьте пользовательский фрагмент кода CSS

Вот и все!

Подписаться

Пожалуйста, поделитесь этим постом!

Календарь событий Divi

Курс Divi для начинающих

Divi Carousel Maker

Помощник по контактной форме Divi

Добавить комментарий Отменить ответ

Рубрики