सीएसएस के साथ बिंदीदार रेखा कैसे खींचना है?

Question

मैं सीएसएस के साथ एक बिंदीदार रेखा कैसे खींच सकता हूं?

Answer 1

उदाहरण के लिए:

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

CSS के साथ स्टाइलिंग<hr> भी देखें ।

Comments

IE 6 के रूप में (IE7 के लिए याद नहीं कर सकते हैं) "बिंदीदार" शैली को नहीं समझेंगे, आप उसे IE6 और कोई अन्य ब्राउज़र का लक्ष्य करने के लिए पाठ्यक्रम सशर्त टिप्पणियों का उपयोग करके इसके बजाय "धराशायी" का उपयोग करने के लिए कह सकते हैं।

— फेलिपएल्स

ऊंचाई: 0px; क्रोम पर काम करता है क्योंकि सीमा ऊंचाई से अलग होती है।

— बेन

आपको यह समझना चाहिए कि बिंदीदार, धराशायी लाइनें कई ब्राउज़रों में अलग दिख सकती हैं। यह धराशायी लाइनों से अधिक संबंधित है।

— रांटिवे

Answer 2

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

Answer 3

HTML का उपयोग करना:

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

और style.css में:

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

Answer 4

स्वीकृत उत्तर में बहुत सारे कूट हैं जो अब आधुनिक ब्राउज़रों के लिए आवश्यक नहीं हैं। मैंने व्यक्तिगत रूप से IE8 के रूप में सभी ब्राउज़रों पर निम्नलिखित सीएसएस का परीक्षण किया है, और यह पूरी तरह से काम करता है।

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

border: noneसभी डिफ़ॉल्ट बॉर्डर स्टाइल को हटाने के लिए पहले आना चाहिए जो ब्राउज़र hrटैग पर लागू होते हैं ।

Answer 5

क्या आपका मतलब कुछ ऐसा है जैसे 'बॉर्डर: 1 पीएक्स डॉटेड ब्लैक'?

w3schools.com संदर्भ

Answer 6

इस लाइन को आपके लिए काम करना चाहिए:

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

Answer 7

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

Comments

इसकी धराशायी रेखा, एक बिंदीदार नहीं।

— राहुल

फिक्स्ड। मैं डॉटेड और धराशायी मिश्रण कर रहा था। साथ ही मेरे जवाब ने आपको एक ही लाइन के बजाय पूरी सीमा प्रदान की होगी।

— ग्रीम पेरो

Answer 8

मैं यहाँ पर सभी समाधान की कोशिश की और कोई भी एक साफ 1px लाइन दिया। इसे प्राप्त करने के लिए निम्नलिखित कार्य करें:

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

वैकल्पिक रूप से:

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

Answer 9

इस तरह का उपयोग करें:

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

Answer 10

ऐसा करने के लिए, आप एक जोड़ने के लिए सरल की जरूरत border-topया border-bottomअपने को <hr/>निम्नलिखित के रूप में टैग:

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

किसी भी लाइन प्रकार या रंग के साथ जो आप चाहते हैं

Answer 11

उस तत्व में निम्नलिखित विशेषता जोड़ें जिसे आप बिंदीदार रेखा चाहते हैं।

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

Answer 12

hrमेरे लिए बनाई गई दो पंक्तियों का उपयोग करते हुए , एक ठोस और एक बिंदीदार।

मैंने पाया कि यह काफी अच्छी तरह से काम करता है:

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

प्लस, क्योंकि आप चौड़ाई को एक प्रतिशत बना सकते हैं, इसमें हमेशा दोनों तरफ कुछ स्थान होगा (यहां तक ​​कि जब आप विंडो का आकार बदलते हैं)।

Answer 13

धराशायी करने की कोशिश करें ...

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

Answer 14

तत्व के बाद आरेखित रेखा:

http://jsfiddle.net/korigan/ubtkc17e/

एचटीएमएल

<h2 class="dotted-line">Lorem ipsum</h2>

सीएसएस

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