Css ile noktalı çizgi nasıl çizilir?

CSS ile nasıl noktalı çizgi çizebilirim?

Örneğin:

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

Ayrıca CSS ile Stil verme<hr> konusuna bakın .

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

HTML kullanarak:

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

ve styles.css dosyasında:

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

Kabul edilen yanıt, modern tarayıcılar için artık gerekli olmayan çok fazla ayrıntı içeriyor. Aşağıdaki CSS'yi IE8'e kadar tüm tarayıcılarda kişisel olarak test ettim ve mükemmel çalışıyor.

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

border: noneTarayıcıların hretiketlere uyguladığı tüm varsayılan kenarlık stilini kaldırmak için önce gelmelidir .

'Border: 1px dotted black' gibi bir şey mi demek istiyorsunuz?

w3schools.com referansı

bu satır sizin için çalışmalıdır:

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

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

Buradaki tüm çözümleri denedim ve hiçbiri temiz bir 1px satırı vermedi. Bunu başarmak için aşağıdakileri yapın:

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

Alternatif olarak:

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

bunun gibi kullanın:

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

Bunu yapmak için , aşağıdaki gibi etiketinize border-topveya eklemeniz yeterlidir :border-bottom<hr/>

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

istediğiniz herhangi bir çizgi türü veya rengi ile

Noktalı çizgi olmasını istediğiniz öğeye aşağıdaki özniteliği ekleyin.

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

hrBenim için oluşturulmuş iki çizgiyi kullanarak , bir düz ve bir noktalı.

Bunun oldukça iyi çalıştığını buldum:

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

Artı, genişliği bir yüzde yapabildiğiniz için, her iki tarafta da bir miktar boşluk olacaktır (pencereyi yeniden boyutlandırsanız bile).

Kesikli deneyin ...

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

Öğeden sonra çizilen satır:

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