Как нарисовать пунктирную линию с помощью css?

98

Как нарисовать пунктирную линию с помощью 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

высота: 0 пикселей; работает в Chrome, потому что границы отделены от высоты.

— Ben

Вы должны понимать, что пунктирные линии могут выглядеть по-разному во многих браузерах. Это больше связано с пунктирными линиями.

— Рантиев

18

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

— рахул
источник

16

Используя 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

— ЧссПлы76
источник

7

эта строка должна работать для вас:

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

4

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

— Грэм Перроу
источник

Это пунктирная линия, а не пунктирная.

— rahul

Исправлена. Я перемешивал точечный и штриховой. Плюс мой ответ дал бы вам целую границу, а не одну линию.

— Грэм Перроу

3

Я пробовал все решения здесь, и ни один не дал чистой линии в 1 пиксель. Для этого сделайте следующее:

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
источник

2

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

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;
}

— Стивен Муре
источник

1

Попробуйте накатить ...

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

— Вибхас Шривастава
источник