Bagaimana cara menggambar garis putus-putus dengan css?

97

Bagaimana cara menggambar garis putus-putus dengan CSS?

html css Kaveh
sumber

Jawaban:

131

Sebagai contoh:

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

Lihat juga Styling <hr>dengan CSS .

Sinan Ünür
sumber
3
Karena IE 6 (tidak dapat mengingat untuk IE7) tidak akan memahami gaya "titik-titik", Anda dapat menyuruhnya untuk menggunakan "garis putus-putus" sebagai gantinya, menggunakan komentar bersyarat tentu saja untuk mengarahkan IE6 dan tidak ada browser lain.
FelipeAls
tinggi: 0px; berfungsi di Chrome karena batasnya terpisah dari ketinggian.
Ben
Anda harus memahami bahwa garis putus-putus dan putus-putus dapat terlihat berbeda di banyak browser. Itu lebih terkait dengan garis putus-putus.
Rantiev
17 
<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />
rahul
sumber
15

Menggunakan HTML:

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

dan di styles.css:

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

Jawaban yang diterima memiliki banyak kekurangan yang tidak lagi diperlukan untuk browser modern. Saya pribadi telah menguji CSS berikut di semua browser sejauh IE8, dan berfungsi dengan sempurna.

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

border: noneharus diutamakan, untuk menghapus semua gaya batas default yang diterapkan browser ke hrtag.

coredumperror
sumber
7

baris ini seharusnya bekerja untuk Anda:

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

sumber
4 
.myclass {
    border-bottom: thin red dotted;
}
Graeme Perrow
sumber
Ini adalah garis putus-putus, bukan titik-titik.
rahul
Tetap. Saya mencampur titik-titik dan putus-putus. Ditambah jawaban saya akan memberi Anda batas penuh daripada satu baris.
Graeme Perrow
3

Saya mencoba semua solusi di sini dan tidak ada yang memberikan garis 1px yang bersih. Untuk mencapai ini lakukan hal berikut:

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

Kalau tidak:

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
sumber
3

gunakan seperti ini:

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

sumber
3

Untuk melakukan ini, Anda hanya perlu menambahkan border-topatau border-bottomke <hr/>tag Anda sebagai berikut:

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

dengan jenis garis atau warna apa pun yang Anda inginkan


sumber
3

Tambahkan atribut berikut ke elemen yang Anda ingin memiliki garis putus-putus.

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

Menggunakan hrmembuat dua garis untuk saya, satu solid dan satu titik.

Saya menemukan bahwa ini bekerja dengan cukup baik:

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

Selain itu, karena Anda dapat membuat lebar menjadi persentase, lebar akan selalu memiliki ruang di kedua sisinya (bahkan saat Anda mengubah ukuran jendela).

lachlanjc.dll
sumber
1

Coba putus asa ... 

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

Doot baris demi elemen:

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;
}
Steven Mouret
sumber