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

Question

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

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

658 14

html css

14 ответов:

Comments

Ничего не найдено.

Sinan Ünür · Accepted Answer · 2016-09-13 06:46:08

например:
hr {
  border:none;
  border-top:1px dotted #f00;
  color:#fff;
  background-color:#fff;
  height:1px;
  width:50%;
}
см. также стилизация <hr> С CSS.

rahul · Accepted Answer · 2009-11-17 06:04:10

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

Brendan Long · Accepted Answer · 2018-02-17 04:24:15

С помощью HTML:

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

и в стилях.css:
.horizontal_dotted_line{
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
} 

CoreDumpError · Accepted Answer · 2014-09-12 01:51:22

принятый ответ имеет много крафт, который больше не требуется для современных браузеров. Я лично протестировал следующий CSS на всех браузерах еще в IE8, и он отлично работает.
 hr {
    border: none;
    border-top: 1px dotted black;
  }
border: none сначала нужно удалить все стили границ по умолчанию, которые браузеры применяют к hr теги.

ChssPly76 · Accepted Answer · 2009-11-17 06:01:54

вы имеете в виду что-то вроде 'border: 1px dotted black'?

w3schools.com ссылка

score 7 · Accepted Answer · 2013-06-02 15:20:56

эта строка должна работать для вас:
<hr style="border-top: 2px dotted black"/>

Graeme Perrow · Accepted Answer · 2009-11-17 06:01:34

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

4

2009-11-17 06:01:34

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ · Accepted Answer · 2013-02-07 22:34:30

Я пробовал все решения здесь, и ни один не дал Чистой линии 1px. Для этого выполните следующие действия:
border: none; border-top: 1px dotted #000;
кроме того:
 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;

score 3 · Accepted Answer · 2013-06-02 13:05:36

использовать такой:
<hr style="border-bottom:dotted" />

score 3 · Accepted Answer · 2013-06-02 18:35:22

для этого вам просто нужно добавить border-top или border-bottom на <hr/> тег следующим образом:
<hr style="border-top: 2px dotted navy" />
С любым типом линии или цветом вы хотите

Sarfraz · Accepted Answer · 2014-07-19 05:35:39

добавить следующий атрибут к элементу, который вы хотите иметь пунктирную линию.
style="border-bottom: 1px dotted #ff0000;"

lachlanjc · Accepted Answer · 2013-09-29 16:27:08

используя hr создал для меня две линии, одну сплошную и одну пунктирную.

я обнаружил, что это работает довольно хорошо:
div {
border-top: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}
плюс, потому что вы можете сделать ширину в процентах, он всегда будет иметь некоторое пространство с обеих сторон (даже при изменении размера окна).

Vibhaas · Accepted Answer · 2014-07-19 05:27:18

попробуйте разбить...
<hr style="border-top: 2px dashed black;color:transparent;"/>

Steven Mouret · Accepted Answer · 2015-12-11 13:33:34

Dooted строка после элемента:

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