Як намалювати пунктирною лінією css?

97

Як я можу намалювати пунктирну лінію за допомогою CSS?

html css

— Каве
джерело

131

Наприклад:

hr {
  border:none;
  border-top:1px dotted #f00;
  color:#fff;
  background-color:#fff;
  height:1px;
  width:50%;
}

Див. Також Стилізація за <hr>допомогою CSS .

— Сінан Унур
джерело

3

Оскільки IE 6 (не пам'ятаю для IE7) не розуміє "пунктирного" стилю, ви можете сказати йому використовувати замість цього "пунктир", звичайно використовуючи умовні коментарі для націлювання на IE6 та жодного іншого браузера.

— FelipeAls

висота: 0px; працює в Chrome, оскільки межі окремо від висоти.

— Бен,

Ви повинні розуміти, що пунктирні пунктирні лінії можуть виглядати по-різному у багатьох браузерах. Це більше пов’язано з пунктирними лініями.

— Рантьєв

17

<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />

— rahul
джерело

15

Використання HTML:

<div class="horizontal_dotted_line"></div>

та у styles.css:

.horizontal_dotted_line{
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
}

— Брендан Лонг
джерело

13

Прийнята відповідь має багато суворості, яка більше не потрібна сучасним браузерам. Я особисто перевіряв наступні CSS у всіх браузерах ще в IE8, і він працює чудово.

 hr {
    border: none;
    border-top: 1px dotted black;
  }

border: noneпотрібно прийти першим, щоб видалити всі стилі межі за замовчуванням, які браузери застосовують до hrтегів.

— coredumperror
джерело

7

Ви маєте на увазі щось на зразок "кордон: 1px пунктирним чорним"?

посилання на w3schools.com

— ChssPly76
джерело

7

цей рядок повинен працювати для вас:

<hr style="border-top: 2px dotted black"/>

4

.myclass {
    border-bottom: thin red dotted;
}

— Грем Перроу
джерело

Його пунктирна лінія, а не пунктирна.

— rahul

Виправлено. Я змішував пунктир і штрих. Плюс моя відповідь дала б вам цілий кордон, а не один рядок.

— Graeme Perrow

3

Я спробував усі рішення тут, і жодне не дало чистого рядка 1px. Для цього виконайте наступне:

border: none; border-top: 1px dotted #000;

Як варіант:

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
джерело

3

використовувати так:

<hr style="border-bottom:dotted" />

3

Для цього вам просто потрібно додати тег до border-topабо як такий:border-bottom<hr/>

<hr style="border-top: 2px dotted navy" />

з будь-яким типом або кольором лінії, який ви хочете

3

Додайте наступний атрибут до елемента, до якого потрібно мати пунктир.

style="border-bottom: 1px dotted #ff0000;"

— Сарфраз
джерело

2

Використовуючи hrстворені для мене два рядки, один суцільний і один пунктирний.

Я виявив, що це спрацювало досить добре:

div {
border-top: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}

Крім того, оскільки ви можете зробити ширину відсотком, вона завжди матиме простір з обох боків (навіть коли ви змінюєте розмір вікна).

— lachlanjc
джерело

1

Спробуйте пунктир ...

<hr style="border-top: 2px dashed black;color:transparent;"/>

— Вібхаас Шрівастава
джерело

1

Пунктирна лінія після елемента:

http://jsfiddle.net/korigan/ubtkc17e/

HTML

<h2 class="dotted-line">Lorem ipsum</h2>

CSS

.dotted-line {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.dotted-line:after {
  content: "..........................................................................................................";
  letter-spacing: 6px;
  font-size: 30px;
  color: #9cbfdb;
  display: inline-block;
  vertical-align: 3px;
  padding-left: 10px;
}

— Стівен Муре
джерело