Как сделать прерывистую линию в css
Перейти к содержимому

Как сделать прерывистую линию в css

  • автор:

Точки между слов

В оглавлениях, справочниках, рецептах для наглядности и удобства разные части текста на одной строке соединяют пунктирной линией (рис. 1). Взгляд скользит по этой линии и не перескакивает на другую строку.

Точки между слов

Рис. 1. Точки между слов

Линия между частями текста создаётся с помощью свойства border-bottom, оно позволяет задать одновременно желаемую толщину, стиль и цвет линии. В итоге мы легко можем сделать линию пунктирной или сплошной, поменяв в стилях одно значение. Сама линия выводится с помощью псевдоэлемента li::before , как показано в примере 1.

Пример 1. Точки между слов

Браузер Internet Explorer не поддерживает свойство order , в нём данный пример работать не будет.

См. также

  • align-items
  • border-bottom
  • flex-grow
  • order
  • Выравнивание гридов
  • Выравнивание с помощью флексбоксов
  • Макет сайта на флексбоксах
  • Наложение элементов сетки
  • Оформление ссылок
  • Свойства flex-контейнера
  • Свойства flex-элементов
  • Создание медиа-объектов
  • Создание флексбоксов

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

Author24 — интернет-сервис помощи студентам

Горизонтальная линия
Добрые форумчане, помогите пожалуйста. Не могу разобраться, можно ли свойства (цвет, ширина) тега.

Не вставляется горизонтальная линия
Делаю свой сайт, вставил видимо какую-то настройку в CSS, не отображаются теперь линия.

Горизонтальная линия по центру сбоку заголовка
<!DOCTYPE html> <html> <head> <link href="css/style.css" rel="stylesheet" .

На подвале голубая горизонтальная линия — как убрать
Друзья, посмотрите пожалуйста сайт uart.kz На подвале появился голубая горизонтальная линия. Не.

284 / 283 / 73
Регистрация: 06.05.2013
Сообщений: 1,613

border: 100px dotted black?

ну смотря куда Вам надо в общем то)

13208 / 6596 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069

Лучший ответ

Сообщение было отмечено как решение

Решение

1 2 3
p>Lorem ipsum dolor sit amet, consectepture adipisicing elit, sed do eiusmod./p> div class="omg">/div> p>Lorem ipsum dolor sit amet, consectepture adipisicing elit, sed do eiusmod./p>
1 2 3
.omg { border-top: #ddd dashed 100px; }

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Пунктирная линия
Здравствуйте! Есть такой код: private void Form1_Paint(object sender, PaintEventArgs e)

Пунктирная линия
Привет, друзья! Как можно как нарисовать пунктирную и точечную линии? выложите пожалуйста примеры.

Пунктирная линия
Задача такая — надо по 4-м точкам нарисовать линию в 2D — окне. При этом каждое звено должно быть.

пунктирная линия
Здравствуйте! Выбираю пунктирный тип линии, пытаюсь нарисовать отрезок, но его не видно. Только.

Или воспользуйтесь поиском по форуму:

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

Elwen

html

  • HTML
  • +1 ещё

Дробит бекграунд при использовании margin?

  • 1 подписчик
  • час назад
  • 21 просмотр

html

  • HTML
  • +1 ещё

Хочу как на фото. Но у меня Почему-то текст находится под фото и за пределы фотографии не может выйти?

  • 1 подписчик
  • 2 часа назад
  • 36 просмотров

css

  • CSS

Как сделать кнопку «play» как в YouTube?

  • 1 подписчик
  • 3 часа назад
  • 59 просмотров

css

  • CSS
  • +2 ещё

Как оптимизировать анимацию?

  • 1 подписчик
  • 6 часов назад
  • 51 просмотр

css

  • CSS

Как пофиксить баг с font-weight при наведении?

  • 1 подписчик
  • 10 часов назад
  • 64 просмотра

css

  • CSS

Как сделать такую разметку?

  • 1 подписчик
  • 23 часа назад
  • 74 просмотра

css

  • CSS

Почему на ios разный select?

  • 1 подписчик
  • вчера
  • 77 просмотров

css

  • CSS

Как расположить панель внизу через стили css?

  • 1 подписчик
  • вчера
  • 51 просмотр

html

  • HTML
  • +2 ещё

Как оттянуть блок с длинным текстом?

  • 1 подписчик
  • вчера
  • 71 просмотр

html

  • HTML
  • +2 ещё

Почему не обрезается длинный текст внутри GRID, вместо этого GRID-элемент выходи за границы родителя?

  • 1 подписчик
  • 17 февр.
  • 41 просмотр

от 40 000 до 55 000 ₽

от 130 000 ₽

Фрамир • Санкт-Петербург

19 февр. 2024, в 21:11

10000 руб./за проект

19 февр. 2024, в 20:51

1500 руб./за проект

19 февр. 2024, в 20:50

1500 руб./за проект

Минуточку внимания

Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями

  • Как использовать русские символы из файла в качестве ключа для unordered_map?
    • 3 подписчика
    • 2 ответа
    • 3 подписчика
    • 3 ответа
    • 2 подписчика
    • 3 ответа
    • 2 подписчика
    • 2 ответа
    • 2 подписчика
    • 1 ответ
    • 2 подписчика
    • 2 ответа
    • 2 подписчика
    • 3 ответа
    • 2 подписчика
    • 0 ответов
    • 2 подписчика
    • 2 ответа
    • 1 подписчик
    • 1 ответ

    CanvasRenderingContext2D.lineDashOffset

    Свойство CanvasRenderingContext2D.lineDashOffset в Canvas 2D API устанавливает смещение штрихов, или «фаза».

    Примечание: Линии нарисованы вызовом метода stroke() .

    Синтаксис

    ctx.lineDashOffset = value;

    Число с плавающей запятой, определяющее величину смещения штрихов линии. Значением по умолчанию является 0,0.

    Примеры

    Смещение штрихов

    Этот пример рисует две пунктирные линии. Первая не имеет смещения. Вторая имеет смещение 4.

    HTML
    canvas id="canvas">canvas> 
    JavaScript
    const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.setLineDash([4, 16]); // Пунктирная линия без смещения ctx.beginPath(); ctx.moveTo(0, 50); ctx.lineTo(300, 50); ctx.stroke(); // Пунктирная линия со смещением 4 ctx.beginPath(); ctx.strokeStyle = "red"; ctx.lineDashOffset = 4; ctx.moveTo(0, 100); ctx.lineTo(300, 100); ctx.stroke(); 
    Результат

    Линия со смещением будет нарисована красным цветом.

    Эффект марширующих муравьёв

    Эффект марширующих муравьёв — это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..

    canvas id="canvas">canvas> 
    const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); let offset = 0; const draw = () =>  ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.setLineDash([4, 2]); ctx.lineDashOffset = -offset; ctx.strokeRect(10, 10, 100, 100); >; const march = () =>  offset++; if (offset > 16)  offset = 0; > draw(); setTimeout(march, 20); >; march(); 

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

    Specification
    HTML Standard
    # dom-context-2d-linedashoffset-dev

    Совместимость с браузерами

    BCD tables only load in the browser

    Смотрите также

    • Интерфейс, определяющий это свойство: CanvasRenderingContext2D
    • CanvasRenderingContext2D.getLineDash()
    • CanvasRenderingContext2D.setLineDash() (en-US)
    • Применение стилей и цвета

    Found a content problem with this page?

    • Edit the page on GitHub.
    • Report the content issue.
    • View the source on GitHub.

    This page was last modified on 3 авг. 2023 г. by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    • Product help
    • Report an issue

    Our communities

    Developers

    • Web Technologies
    • Learn Web Development
    • MDN Plus
    • Hacks Blog
    • Website Privacy Notice
    • Cookies
    • Legal
    • Community Participation Guidelines

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *