बिंदीदार बॉर्डर डॉट्स के बीच स्थान कैसे बढ़ाएं

Question

मैं अपने बॉक्स में बिंदीदार स्टाइल बॉर्डर का उपयोग कर रहा हूं

.box {
    width: 300px;
    height: 200px;
    border: dotted 1px #f00;
    float: left;
}

मैं सीमा के प्रत्येक बिंदु के बीच की जगह बढ़ाना चाहता हूं।

Answer 1

यह चाल क्षैतिज और ऊर्ध्वाधर दोनों सीमाओं के लिए काम करती है:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

आप आकार को पृष्ठभूमि-आकार और अनुपात को रैखिक-ढाल प्रतिशत के साथ समायोजित कर सकते हैं। इस उदाहरण में मेरे पास 1px डॉट्स और 2px रिक्ति की बिंदीदार रेखा है। इस तरह आप कई पृष्ठभूमि का उपयोग करते हुए कई बिंदीदार सीमाएँ भी रख सकते हैं।

इस JSFiddle में यह कोशिश करो या कोड स्निपेट उदाहरण पर एक नज़र डालें:

div {
  padding: 10px 50px;
}
.dotted {
  border-top: 1px #333 dotted;
}
.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.dotted-spaced {
  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: top;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}
.left {
  float: left;
  padding: 40px 10px;
  background-color: #F0F0DA;
}
.left.dotted {
  border-left: 1px #333 dotted;
  border-top: none;
}
.left.dotted-gradient {
  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: left;
  background-size: 1px 3px;
  background-repeat: repeat-y;
}
.left.dotted-spaced {
  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y;
}

<div>no
  <br>border</div>
<div class='dotted'>dotted
  <br>border</div>
<div class='dotted-gradient'>dotted
  <br>with gradient</div>
<div class='dotted-spaced'>dotted
  <br>spaced</div>

<div class='left'>no
  <br>border</div>
<div class='dotted left'>dotted
  <br>border</div>
<div class='dotted-gradient left'>dotted
  <br>with gradient</div>
<div class='dotted-spaced left'>dotted
  <br>spaced</div>

Comments

चयनित उत्तर होना चाहिए।

— केविन जुरकोव्स्की

imho यह n डिग्री का हैक है।

— मुहम्मद उमर

मैं एक ही काम करना चाहता हूं, लेकिन बिंदीदार बॉर्डर की चौड़ाई 1px के बजाय 3px है और अब यह बिंदीदार होने के बजाय चौकोर हो जाती है।

— भोजेंद्र रौनियार

मैंने इसे लागू करने और रंग बदलने और तेज़ी से रिक्ति करने के लिए SCSS मिक्सिन बनाया है। इसे github.com/florbraz/Dotted-Border-w-custom-spacing-SCSS-sixin पर देखें ।

— फ्लोर ब्रज

क्या होगा यदि मैं चाहता हूं कि सभी 4 किनारे धराशायी हो जाएं?

— रयान

Answer 2

यहाँ एक चाल है जो मैंने हाल ही में एक परियोजना पर उपयोग की है जो क्षैतिज सीमाओं के साथ लगभग कुछ भी प्राप्त करना है। मैं <hr/>हर बार एक क्षैतिज सीमा की आवश्यकता होती है। इस आउटर पर बॉर्डर जोड़ने का मूल तरीका कुछ ऐसा है

 hr {border-bottom: 1px dotted #000;}

लेकिन अगर आप सीमा पर नियंत्रण रखना चाहते हैं और उदाहरण के लिए, डॉट्स के बीच का स्थान बढ़ाते हैं, तो आप कुछ इस तरह की कोशिश कर सकते हैं:

hr {
height:14px; /* specify a height for this hr */
overflow:hidden;
}

और निम्नलिखित में, आप अपनी सीमा बनाते हैं (यहाँ डॉट्स के साथ एक उदाहरण है)

hr:after {
content:".......................................................................";
letter-spacing: 4px; /* Use letter-spacing to increase space between dots*/
}

इसका मतलब यह भी है कि आप डॉट्स, ग्रेडिएंट आदि में टेक्स्ट-शैडो को जोड़ सकते हैं।

खैर, यह क्षैतिज सीमाओं के लिए वास्तव में बहुत अच्छा काम करता है। यदि आपको ऊर्ध्वाधर वाले चाहिए, तो आप एक और घंटे के लिए एक वर्ग निर्दिष्ट कर सकते हैं और CSS3 rotationसंपत्ति का उपयोग कर सकते हैं।

Comments

क्या यह क्रॉस-ब्राउज़र संगत है?

— J82

मैं कल्पना नहीं कर सकता कि ** में एक दर्द क्या है जिसे बनाए रखना होगा।

— क्ज़कई

ऊर्ध्वाधर के लिए समान प्रभाव कैसे प्राप्त करें?

— रिंकू

@ रिंकू विथ ट्रांसफॉर्म: रोटेट (90 डीजी); प्रदर्शन क्षेत्र;

— जीरो के के

इतना बदसूरत, लेकिन इतना चालाक :) मैं यह भी ध्यान देता हूं कि अगर मैं ऊंचाई सेट करता हूं तो मुझे प्लेसमेंट पर बेहतर नियंत्रण हो सकता है: 0; और प्लेसमेंट को नियंत्रित करने के लिए पैडिंग का उपयोग करें। इसलिए मैं नीचे एक छोटे से कमरे के साथ बिंदीदार रेखा चाहता था, इसलिए मैंने गद्दी का उपयोग किया: 0 0 10px;

— मैथ्यू ली

Answer 3

आप इसे शुद्ध CSS से नहीं कर सकते हैं - CSS3 कल्पना में इस बारे में एक विशिष्ट उद्धरण भी है:

नोट: डॉट्स और डैश की रिक्ति पर कोई नियंत्रण नहीं है, न ही डैश की लंबाई पर। कार्यान्वयन को एक रिक्ति चुनने के लिए प्रोत्साहित किया जाता है जो कोनों को सममित बनाता है।

हालाँकि, आप बॉर्डर इमेज या बैकग्राउंड इमेज का उपयोग कर सकते हैं जो ट्रिक करती है।

Comments

आप पूरी तरह से अनुकूलन सीमा के लिए ग्रेडिएंट (शुद्ध CSS) का उपयोग कर सकते हैं। नीचे उत्तर देखें

— 16

-1, @ शादिका, सीएसएस 3 कल्पना क्या कहती है कि इसका उपयोग नहीं किया जा सकता है border: dotted, लेकिन यह संभव है कि ग्रेडर का उपयोग करके ऐसा किया जा सके जैसा कि ईगोरजोस के उत्तर ने दिखाया है।

— पेसियर

Answer 4

यह मानक CSS बॉर्डर और एक छद्म तत्व + अतिप्रवाह: छिपी का उपयोग करता है। उदाहरण में आपको तीन अलग 2px धराशायी सीमाएँ मिलती हैं: सामान्य, 5px की तरह, 10px की तरह। क्या वास्तव में केवल 10-8 = 2px के साथ 10px दिखाई देता है।

div.two{border:2px dashed #FF0000}

div.five:before {
  content: "";
  position: absolute;
  border: 5px dashed #FF0000;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

div.ten:before {
  content: "";
  position: absolute;
  border: 10px dashed #FF0000;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

div.odd:before {left:0;right:0;border-radius:60px}

div {
  overflow: hidden;
  position: relative;


  text-align:center;
  padding:10px;
  margin-bottom:20px;
}

<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div>

बड़े गोल कोनों के साथ छोटे तत्वों पर लागू कुछ मजेदार प्रभावों के लिए बना सकते हैं।

Comments

मजबूत काम! यह इन जवाबों में से केवल एक है जो वास्तव में बनाए रखने के लिए भयानक होने के बिना काम करता है, आईएमओ। यहां तक ​​कि स्वीकृत उत्तर केवल div के एक किनारे के लिए काम करता है। यह पूरी सीमा के लिए काम करता है।

— रयान

यह अब तक का सबसे अच्छा और सबसे सुंदर जवाब है। समाधान के रूप में चिह्नित किया जाना चाहिए ...

— बीजी

Answer 5

इसलिए दिए गए उत्तर के साथ शुरू करना और इस तथ्य को लागू करना कि CSS3 कई सेटिंग्स की अनुमति देता है - नीचे दिया गया कोड एक पूर्ण बॉक्स बनाने के लिए उपयोगी है:

#border {
  width: 200px;
  height: 100px;
  background: yellow;
  text-align: center;
  line-height: 100px;
  background: linear-gradient(to right, orange 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(blue 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, green 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(red 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 1px, 1px 10px;
}

<div id="border">
  bordered area
</div>

यह ध्यान देने योग्य है कि पृष्ठभूमि आकार में 10px उस क्षेत्र को देता है जो डैश और गैप को कवर करेगा। पृष्ठभूमि टैग का 50% वास्तव में डैश कितना चौड़ा है। इसलिए प्रत्येक सीमा की तरफ अलग-अलग लंबाई के डैश होना संभव है।

Answer 6

के लिए उपलब्ध मानों के लिए MDN डॉक्स देखें border-style:

• कोई नहीं: कोई सीमा नहीं, चौड़ाई 0. पर सेट है। यह डिफ़ॉल्ट मान है।
• छिपा हुआ: टेबल तत्वों के लिए सीमा संघर्ष समाधान के संदर्भ में छोड़कर, 'कोई नहीं' के समान।
• धराशायी: लघु डैश या लाइन खंडों की श्रृंखला।
• बिंदीदार: डॉट्स की श्रृंखला।
• डबल: दो सीधी रेखाएं जो बॉर्डर-चौड़ाई के रूप में परिभाषित पिक्सेल राशि को जोड़ती हैं।
• नाली: नक्काशीदार प्रभाव।
• इनसेट: बॉक्स एम्बेडेड दिखाई देता है।
• आउटसेट: 'इनसेट' के विपरीत। बॉक्स 3D (उभरा हुआ) दिखाई देता है।
• रिज: 'खांचे' के विपरीत। सीमा 3 डी (बाहर आ रही) प्रतीत होती है।
• ठोस: एकल, सीधी, ठोस रेखा।

उन विकल्पों के अलावा, मानक सीमा की शैली को प्रभावित करने का कोई तरीका नहीं है।

यदि संभावनाएँ आपकी पसंद के अनुसार नहीं हैं, तो आप CSS3 का उपयोग कर सकते हैं , border-imageलेकिन ध्यान दें कि इसके लिए ब्राउज़र समर्थन अभी भी बहुत धब्बेदार है।

Comments

धन्यवाद pekka, इसका मतलब है कि मैं सीमा संपत्ति का उपयोग नहीं कर सकता ... इसलिए मुझे इसके लिए छवि का उपयोग करना होगा।

— काली चरण राजपूत

@ अगर कोई भी बॉर्डर स्टाइल आपकी पसंद के हिसाब से नहीं है, तो हाँ।

— पेकका

Answer 7

शॉर्ट एज सिंटैक्स के साथ @ ईगराजोज के जवाब पर आधारित 4 किनारों का समाधान:

background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */

#page {
    background: linear-gradient(to right, #000 33%, #fff 0%) top/10px 1px repeat-x, /* top */
    linear-gradient(#000 33%, #fff 0%) right/1px 10px repeat-y, /* right */
    linear-gradient(to right, #000 33%, #fff 0%) bottom/10px 1px repeat-x, /* bottom */
    linear-gradient(#000 33%, #fff 0%) left/1px 10px repeat-y; /* left */
    
    width: 100px;
    height: 100px;
}

<div id="page"></div>

Answer 8

यह एक पुराना, लेकिन अभी भी बहुत प्रासंगिक विषय है। वर्तमान शीर्ष जवाब अच्छी तरह से है, लेकिन केवल बहुत छोटे डॉट्स के लिए काम करता है। जैसा कि भोजेंद्र रौनियार ने पहले ही टिप्पणी में बताया कि बड़े (> 2 पीएक्स) डॉट्स के लिए, डॉट्स चौकोर दिखाई देते हैं, गोल नहीं। मैं दूरी के लिए खोज यह पेज पाया डॉट्स , नहीं स्थान दिया गया है वर्गों (या यहां तक कि डैश के रूप में कुछ जवाब यहां का उपयोग करें)।

इस पर निर्माण, मैंने उपयोग किया radial-gradient। इसके अलावा, Ukuser32 से उत्तर का उपयोग करके , सभी चार सीमाओं के लिए डॉट-गुण आसानी से दोहराया जा सकता है। केवल कोने सही नहीं हैं।

div {
    padding: 1em;
    background-image:
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle at 2.5px, #000 1.25px, rgba(255,255,255,0) 2.5px),
        radial-gradient(circle, #000 1.25px, rgba(255,255,255,0) 2.5px);
    background-position: top, right, bottom, left;
    background-size: 15px 5px, 5px 15px;
    background-repeat: repeat-x, repeat-y;
}

<div>Some content with round, spaced dots as border</div>

radial-gradient उम्मीद :

• आकार और वैकल्पिक स्थिति
• दो या अधिक स्टॉप: एक रंग और त्रिज्या

यहाँ, मैं एक 5 पिक्सेल व्यास (2.5px त्रिज्या) डॉट चाहता था, डॉट्स के बीच 2 गुना व्यास (10px) के साथ, 15px तक जोड़ रहा था। background-sizeइन मेल खाना चाहिए।

दो स्टॉप को इस तरह परिभाषित किया गया है कि डॉट अच्छा और चिकना है: आधे त्रिज्या के लिए ठोस काला और एक ढाल से पूर्ण त्रिज्या के लिए।

Answer 9

यह वास्तव में एक पुराना सवाल है, लेकिन इसकी Google में उच्च रैंकिंग है इसलिए मैं अपनी पद्धति में फेंकने जा रहा हूं जो आपकी आवश्यकताओं के आधार पर काम कर सकता है।

मेरे मामले में, मैं एक मोटी धराशायी सीमा चाहता था जिसमें डैश के बीच कम से कम ब्रेक था। मैंने एक सीएसएस पैटर्न जनरेटर का उपयोग किया (जैसे यह एक: http://www.patternify.com/ ) 1px लंबा पैटर्न द्वारा 10px चौड़ा बनाने के लिए। उस का 9px ठोस डैश रंग है, 1px सफेद है।

अपने CSS में, मैंने उस पैटर्न को बैकग्राउंड इमेज के रूप में शामिल किया, और फिर बैकग्राउंड-साइज़ विशेषता का उपयोग करके इसे बढ़ाया। मैं 2px दोहराया डैशबोर्ड द्वारा 20px के साथ समाप्त हो गया, 18px उस ठोस लाइन और 2px सफेद। आप इसे वास्तव में मोटी धराशायी लाइन के लिए और भी अधिक बढ़ा सकते हैं।

अच्छी बात यह है कि छवि को एन्कोड किया गया है क्योंकि डेटा आपके पास अतिरिक्त HTTP अनुरोध के बाहर नहीं है, इसलिए कोई प्रदर्शन बोझ नहीं है। मैंने अपनी छवि को SASS वैरिएबल के रूप में संग्रहीत किया है ताकि मैं इसे अपनी साइट में पुनः उपयोग कर सकूं।

Answer 10

संक्षिप्त उत्तर: आप नहीं कर सकते।

आपको border-imageसंपत्ति और कुछ छवियों का उपयोग करना होगा ।

Answer 11

इतने सारे लोग कहते हैं "आप नहीं कर सकते"। हाँ तुम कर सकते हो। यह सच है कि डैश के बीच नाली स्थान को नियंत्रित करने के लिए सीएसएस नियम नहीं है, लेकिन सीएसएस में अन्य क्षमताएं हैं। यह कहने के लिए जल्दी मत करो कि एक काम नहीं किया जा सकता है।

.hr {
    border-top: 5px dashed #CFCBCC;
    margin: 30px 0;
    position: relative;
}

.hr:before {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -2px;
    width: 100%;
}

.hr:after {
    background-color: #FFFFFF;
    content: "";
    height: 10px;
    position: absolute;
    top: -13px;
    width: 100%;
}

मूल रूप से सीमा-शीर्ष ऊंचाई (इस मामले में 5 पीएक्स) वह नियम है जो गटर "चौड़ाई" को निर्धारित करता है। OIf बेशक आपको अपनी आवश्यकताओं के अनुरूप रंगों को समायोजित करने की आवश्यकता होगी। यह एक क्षैतिज रेखा के लिए एक छोटा उदाहरण है, ऊर्ध्वाधर रेखा बनाने के लिए बाएं और दाएं का उपयोग करें।

Comments

निष्पक्ष होने के लिए, मुझे लगता है कि ज्यादातर लोग कह रहे हैं कि आप इसे बॉर्डर बिंदीदार स्टाइल को समायोजित करने के शाब्दिक सवाल पर नहीं कर सकते। वे ऐसा नहीं कह रहे हैं कि अन्य सीएसएस गुणों का उपयोग करना संभव नहीं है। मेरी राय में, यह एक अर्थपूर्ण दृष्टिकोण से पृष्ठभूमि छवि या सीमा-छवि का उपयोग करने के लिए बहुत अधिक अर्थ देता है जैसा कि दूसरों ने दिखाया है, छद्म तत्वों और सीएसएस की एक दर्जन लाइनों का उपयोग करने से।

— एलेक्स

Answer 12

मैंने एक svg के साथ डॉट्स बनाने के लिए एक जावास्क्रिप्ट फ़ंक्शन बनाया। आप जावास्क्रिप्ट कोड में डॉट रिक्ति और आकार को समायोजित कर सकते हैं।

var make_dotted_borders = function() {
    // EDIT THESE SETTINGS:
    
    var spacing = 8;
    var dot_width = 2;
    var dot_height = 2;
    
    //---------------------

    var dotteds = document.getElementsByClassName("dotted");
    for (var i = 0; i < dotteds.length; i++) {
        var width = dotteds[i].clientWidth + 1.5;
        var height = dotteds[i].clientHeight;

        var horizontal_count = Math.floor(width / spacing);
        var h_spacing_percent = 100 / horizontal_count;
        var h_subtraction_percent = ((dot_width / 2) / width) * 100;

        var vertical_count = Math.floor(height / spacing);
        var v_spacing_percent = 100 / vertical_count;
        var v_subtraction_percent = ((dot_height / 2) / height) * 100;

        var dot_container = document.createElement("div");
        dot_container.classList.add("dot_container");
        dot_container.style.display = getComputedStyle(dotteds[i], null).display;

        var clone = dotteds[i].cloneNode(true);

        dotteds[i].parentElement.replaceChild(dot_container, dotteds[i]);
        dot_container.appendChild(clone);

        for (var x = 0; x < horizontal_count; x++) {
            // The Top Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            var left_percent = (h_spacing_percent * x) - h_subtraction_percent;
            dot.style.left = left_percent + "%";
            dot.style.top = (-dot_height / 2) + "px";
            dot_container.appendChild(dot);

            // The Bottom Dots
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (h_spacing_percent * x) - h_subtraction_percent + "%";
            dot.style.top = height - (dot_height / 2) + "px";
            dot_container.appendChild(dot);
        }

        for (var y = 1; y < vertical_count; y++) {
            // The Left Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = (-dot_width / 2) + "px";
            dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            dot_container.appendChild(dot);
        }
        for (var y = 0; y < vertical_count + 1; y++) {
            // The Right Dots:
            var dot = document.createElement("div");
            dot.classList.add("dot");
            dot.style.width = dot_width + "px";
            dot.style.height = dot_height + "px";

            dot.style.left = width - (dot_width / 2) + "px";
            if (y < vertical_count) {
                dot.style.top = (v_spacing_percent * y) - v_subtraction_percent + "%";
            }
            else {
                dot.style.top = height - (dot_height / 2) + "px";
            }

            dot_container.appendChild(dot);
        }
    }
}

make_dotted_borders();

div.dotted {
    display: inline-block;
    padding: 0.5em;
}

div.dot_container {
    position: relative;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

div.dot {
    position: absolute;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="50" fill="black" /></svg>');
}

<div class="dotted">Lorem Ipsum</div>

Answer 13

यदि आप केवल आधुनिक ब्राउज़रों को लक्षित कर रहे हैं, और आपकी सामग्री से आपकी सीमा अलग हो सकती है, तो आप बड़े पैमाने पर डॉट या डैश प्राप्त करने के लिए CSS स्केल ट्रांसफ़ॉर्म का उपयोग कर सकते हैं:

border: 1px dashed black;
border-radius: 10px;
-webkit-transform: scale(8);
transform: scale(8);

यह लाइन अप करने के लिए इसे प्राप्त करने के लिए बहुत अधिक स्थितिगत मोड़ लेता है, लेकिन यह काम करता है। सीमा की मोटाई, शुरुआती आकार और पैमाने के कारक को बदलकर, आप केवल मोटाई-लंबाई के अनुपात के बारे में प्राप्त कर सकते हैं जो आप चाहते हैं। केवल एक चीज जिसे आप स्पर्श नहीं कर सकते हैं वह है डैश-टू-गैप अनुपात।

Comments

ऐसा करने से सामग्री भी लागू होगीscale(8)

— परदीप जैन

बॉर्डर: 1px काला धराशायी; क्रोम ब्राउज़र में अज्ञात संपत्ति मानी जाती है।

— इंजम उल हसन

Answer 14

<div style="width: 100%; height: 100vh; max-height: 20px; max-width: 100%; background: url('https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/853636/settings_images/Ei2yf3t7TvyRpFaLQZiX_dot.jpg') #000; background-repeat: repeat;">&nbsp;</div>

यह वही है जो मैंने किया है - यहां एक छवि दर्ज करें छवि विवरण का उपयोग करें

Answer 15

AFAIK ऐसा करने का कोई तरीका नहीं है। आप एक धराशायी सीमा का उपयोग कर सकते हैं या शायद सीमा की चौड़ाई को थोड़ा बढ़ा सकते हैं, लेकिन बस सीएसएस के साथ अधिक खाली स्थान प्राप्त करना असंभव है।

Answer 16

आप एक कैनवस (जावास्क्रिप्ट के माध्यम से) बना सकते हैं और एक बिंदीदार रेखा खींच सकते हैं। कैनवास के भीतर आप नियंत्रित कर सकते हैं कि डैश और बीच में कितनी देर तक रहेगा।

Comments

यह एक बहुत ही जटिल समाधान है। मैं मदद नहीं कर सकता, लेकिन यह महसूस करता हूं कि इससे प्रदर्शन और कथित लोड समय में थोड़ा अधिक खर्च होगा, जो पृष्ठ के बाकी जेएस के वजन पर निर्भर करता है।

— एम्मेट आर