วิธีการวาดเส้นประด้วย css?

ฉันจะวาดเส้นประด้วย CSS ได้อย่างไร

ตัวอย่างเช่น:

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

ดูยังจัดแต่งทรงผม<hr>ด้วย CSS

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

ใช้ HTML:

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

และใน styles.css:

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

คำตอบที่ได้รับการยอมรับมีจำนวนมากที่ไม่จำเป็นสำหรับเบราว์เซอร์สมัยใหม่อีกต่อไป ฉันได้ทดสอบ CSS ต่อไปนี้เป็นการส่วนตัวบนเบราว์เซอร์ทั้งหมดจนถึง IE8 และทำงานได้อย่างสมบูรณ์แบบ

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

border: noneต้องมาก่อนเพื่อลบรูปแบบเส้นขอบเริ่มต้นทั้งหมดที่เบราว์เซอร์ใช้กับhrแท็ก

คุณหมายถึงอะไรเช่น 'border: 1px dotted black'?

ข้อมูลอ้างอิง w3schools.com

บรรทัดนี้น่าจะเหมาะกับคุณ:

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

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

ฉันลองวิธีแก้ปัญหาทั้งหมดที่นี่และไม่มีใครให้เส้น 1px ที่สะอาด เพื่อให้บรรลุสิ่งนี้ให้ทำดังต่อไปนี้:

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

อีกทางหนึ่ง:

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

ใช้แบบนี้:

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

ในการดำเนินการนี้คุณต้องเพิ่มborder-topหรือborder-bottomใน<hr/>แท็กของคุณดังต่อไปนี้:

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

ด้วยประเภทเส้นหรือสีที่คุณต้องการ

เพิ่มแอตทริบิวต์ต่อไปนี้ให้กับองค์ประกอบที่คุณต้องการให้มีเส้นประ

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

การใช้hrสร้างเส้นสองเส้นสำหรับฉันหนึ่งเส้นทึบและหนึ่งจุด

ฉันพบว่าสิ่งนี้ใช้ได้ดีทีเดียว:

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

นอกจากนี้เนื่องจากคุณสามารถกำหนดความกว้างเป็นเปอร์เซ็นต์ได้จึงจะมีพื้นที่ว่างด้านใดด้านหนึ่งเสมอ (แม้ว่าคุณจะปรับขนาดหน้าต่างก็ตาม)

ลองขีด ...

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

บรรทัดหลังองค์ประกอบ:

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