धराशायी सीमा स्ट्रोक लंबाई और स्ट्रोक के बीच की दूरी को नियंत्रित करें

Question

क्या सीएसएस में धराशायी सीमा स्ट्रोक के बीच की लंबाई और दूरी को नियंत्रित करना संभव है?

यह उदाहरण नीचे ब्राउज़रों के बीच अलग-अलग प्रदर्शित करता है:

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}

<div>I have a dashed border!</div>

बड़े अंतर: IE 11 / फ़ायरफ़ॉक्स / क्रोम

क्या कोई विधियाँ हैं जो धराशायी सीमाओं की उपस्थिति का अधिक नियंत्रण प्रदान कर सकती हैं?

Answer 1

सीएसएस रेंडर ब्राउज़र विशिष्ट है और मुझे इस पर कोई ठीक ट्यूनिंग नहीं पता है, आपको हैम द्वारा अनुशंसित चित्रों के साथ काम करना चाहिए। संदर्भ: http://www.w3.org/TR/CSS2/box.html#border-style-properties

Answer 2

देशी धराशायी सीमा संपत्ति मूल्य डैश पर नियंत्रण की पेशकश नहीं करता है ... इसलिए border-imageसंपत्ति पर लाओ !

के साथ अपनी सीमा खींची border-image

संगतता : यह महान ब्राउज़र समर्थन (IE 11 और सभी आधुनिक ब्राउज़र) प्रदान करता है। एक सामान्य सीमा को पुराने ब्राउज़रों के लिए एक कमबैक के रूप में सेट किया जा सकता है।

आइए इनका निर्माण करें

ये सीमाएँ बिल्कुल उसी क्रॉस-ब्राउज़र को प्रदर्शित करेंगी!

चरण 1 - एक उपयुक्त छवि बनाएं

यह उदाहरण 15 पिक्सेल चौड़ा 15 पिक्सेल चौड़ा है और अंतराल वर्तमान में 5px चौड़ा है। यह पारदर्शिता के साथ एक .png है।

जब इसे ज़ूम इन किया जाता है तो फ़ोटोशॉप में ऐसा दिखता है:

यह वह है जो पैमाने पर दिखता है:

अंतराल और स्ट्रोक की लंबाई को नियंत्रित करना

व्यापक / छोटे अंतराल या स्ट्रोक बनाने के लिए, छवि में अंतराल या स्ट्रोक को चौड़ा / छोटा करें।

यहाँ एक छवि है जिसमें 10px अंतराल हैं:

सही ढंग से बढ़ाया =

चरण 2 - सीएसएस बनाएं - इस उदाहरण के लिए 4 बुनियादी चरणों की आवश्यकता है

1. सीमा-छवि-स्रोत परिभाषित करें :

   border-image-source:url("http://i.stack.imgur.com/wLdVc.png");  

2. वैकल्पिक - सीमा-छवि-चौड़ाई निर्धारित करें :

   border-image-width: 1;

   डिफ़ॉल्ट मान 1. यह एक पिक्सेल मूल्य, प्रतिशत मूल्य या एक और कई (1x, 2x, 3x आदि) के रूप में भी सेट किया जा सकता है। यह किसी भी border-widthसेट को ओवरराइड करता है ।

3. सीमा-छवि-स्लाइस को परिभाषित करें :

   इस उदाहरण में, ऊपर, दाएं, नीचे और बाएं सीमाओं की छवियों की मोटाई 2px है, और उनके बाहर कोई अंतराल नहीं है, इसलिए हमारा टुकड़ा मूल्य 2 है:

   border-image-slice: 2; 

   स्लाइस इस तरह दिखते हैं, ऊपर, दाएं, नीचे और बाएं से 2 पिक्सेल:

   

4. सीमा-छवि-दोहराने को परिभाषित करें :

   इस उदाहरण में, हम चाहते हैं कि पैटर्न हमारे div के चारों ओर समान रूप से दोहराएं। तो हम चुनते हैं:

   border-image-repeat: round;

आशुलिपि लेखन

उपरोक्त गुणों को व्यक्तिगत रूप से, या शॉर्टहैंड में बॉर्डर-इमेज का उपयोग करके सेट किया जा सकता है :

border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;

पूरा उदाहरण

border: dashed 4px #000गिरावट पर ध्यान दें । गैर-सहायक ब्राउज़रों को यह सीमा प्राप्त होगी।

.bordered {
  display: inline-block;
  padding: 20px;
  /* Fallback dashed border
     - the 4px width here is overwritten with the border-image-width (if set)
     - the border-image-width can be omitted below if it is the same as the 4px here
  */
  border: dashed 4px #000;
  
  /* Individual border image properties */
  border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
  border-image-slice: 2;
  border-image-repeat: round;  
  
  /* or use the shorthand border-image */
  border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}


/*The border image of this one creates wider gaps*/
.largeGaps {
  border-image-source: url("http://i.stack.imgur.com/LKclP.png");
  margin: 0 20px;
}

<div class="bordered">This is bordered!</div>

<div class="bordered largeGaps">This is bordered and has larger gaps!</div>

Comments

ध्यान दें कि border-style: solidयदि आपको कमबैक छोड़ना है तो (या कुछ समान) निर्दिष्ट करना होगा ।

— रॉबेंडेबिन जूल

यह समाधान 'बॉर्डर-कलर' विशेषता के साथ काम नहीं करता है

— माइकल रोविंस्की

Answer 3

border-imageसंपत्ति के अलावा , स्ट्रोक की लंबाई और उनके बीच की दूरी पर नियंत्रण के साथ धराशायी सीमा बनाने के लिए कुछ अन्य तरीके हैं। वे नीचे वर्णित हैं:

विधि 1: एसवीजी का उपयोग करना

हम pathएक polygonतत्व का उपयोग करके या stroke-dasharrayसंपत्ति सेट करके धराशायी सीमा बना सकते हैं। संपत्ति दो मापदंडों को लेती है जहां एक डैश के आकार को परिभाषित करता है और दूसरा उनके बीच की जगह को निर्धारित करता है।

पेशेवरों:

1. प्रकृति द्वारा एसवीजी स्केलेबल ग्राफिक्स हैं और किसी भी कंटेनर आयामों के लिए अनुकूल हो सकते हैं।
2. border-radiusइसमें शामिल होने पर भी बहुत अच्छा काम कर सकते हैं । हम बस इस उत्तर में pathएक ( circleजैसे ) के साथ बदल सकते हैं (या) एक सर्कल में परिवर्तित करें ।path
3. SVG के लिए ब्राउज़र समर्थन बहुत अच्छा है और IE8- के लिए VML का उपयोग करके कमबैक प्रदान किया जा सकता है।

विपक्ष:

1. जब कंटेनर के आयाम आनुपातिक रूप से नहीं बदलते हैं, तो रास्तों में बड़े पैमाने पर बदलाव होते हैं जिसके परिणामस्वरूप डैश और उनके बीच का स्थान बदल जाता है (स्निपेट में पहले बॉक्स पर मंडराने की कोशिश करें)। इसे vector-effect='non-scaling-stroke'(दूसरे बॉक्स में) जोड़कर नियंत्रित किया जा सकता है, लेकिन IE में इस संपत्ति के लिए ब्राउज़र समर्थन शून्य है।

.dashed-vector {
  position: relative;
  height: 100px;
  width: 300px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
path{
  fill: none;
  stroke: blue;
  stroke-width: 5;
  stroke-dasharray: 10, 10;
}
span {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px;
}


/* just for demo */

div{
  margin-bottom: 10px;
  transition: all 1s;
}
div:hover{
  height: 100px;
  width: 400px;
}

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' />
  </svg>
  <span>Some content</span>
</div>

<div class='dashed-vector'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
  </svg>
  <span>Some content</span>
</div>

---

विधि 2: स्नातक का उपयोग करना

हम कई linear-gradientपृष्ठभूमि छवियों का उपयोग कर सकते हैं और उन्हें एक धराशायी सीमा प्रभाव बनाने के लिए उचित रूप से स्थिति दे सकते हैं। यह भी किया जा सकता है repeating-linear-gradientलेकिन दोहराव ढाल का उपयोग करने के कारण बहुत सुधार नहीं होता है क्योंकि हमें केवल प्रत्येक दिशा में दोहराने के लिए प्रत्येक ढाल की आवश्यकता होती है।

.dashed-gradient{
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

.dashed-repeating-gradient {
  height: 100px;
  width: 200px;
  padding: 10px;
  background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
}

/* just for demo */

div {
  margin: 10px;
  transition: all 1s;
}
div:hover {
  height: 150px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='dashed-gradient'>Some content</div>
<div class='dashed-repeating-gradient'>Some content</div>

पेशेवरों:

1. स्केलेबल और कंटेनर के आयाम गतिशील होने पर भी अनुकूलित कर सकते हैं।
2. किसी भी अतिरिक्त छद्म तत्वों का उपयोग नहीं करता है जिसका अर्थ है कि उन्हें किसी अन्य संभावित उपयोग के लिए अलग रखा जा सकता है।

विपक्ष:

1. रैखिक ग्रेडिएंट के लिए ब्राउज़र समर्थन तुलनात्मक रूप से कम है और यदि आप IE 9- का समर्थन करना चाहते हैं तो यह एक नहीं है। यहां तक ​​कि CSS3 PIE जैसी लाइब्रेरी IE8- में ढाल पैटर्न के निर्माण का समर्थन नहीं करती हैं।
2. जब border-radiusइसमें शामिल नहीं किया जाता है, क्योंकि पृष्ठभूमि वक्र के आधार पर नहीं होती है border-radius। वे बदले में मिल जाते हैं।

---

विधि 3: बॉक्स छाया

हम छद्म तत्वों का उपयोग करके एक छोटी सी पट्टी (डैश के आकार में) बना सकते हैं और फिर box-shadowनीचे स्निपेट की तरह सीमा बनाने के लिए इसके कई संस्करण बना सकते हैं।

यदि डैश एक चौकोर आकार है, तो एक एकल छद्म तत्व पर्याप्त होगा लेकिन अगर यह एक आयत है, तो हमें शीर्ष + नीचे की सीमाओं के लिए एक छद्म तत्व की आवश्यकता होगी और दूसरी बाईं + दाईं सीमाओं के लिए। ऐसा इसलिए है क्योंकि शीर्ष सीमा पर डैश के लिए ऊंचाई और चौड़ाई बाईं तरफ से अलग होगी।

पेशेवरों:

1. डैश के आयाम छद्म तत्व के आयामों को बदलकर चलाया जा सकता है। प्रत्येक छाया के बीच की जगह को संशोधित करके रिक्ति नियंत्रणीय है।
2. प्रत्येक बॉक्स छाया के लिए एक अलग रंग जोड़कर एक बहुत ही अनूठा प्रभाव उत्पन्न किया जा सकता है।

विपक्ष:

1. चूंकि हमें डैश और रिक्ति के आयामों को मैन्युअल रूप से सेट करना है, इसलिए अभिभावक बॉक्स के आयाम गतिशील होने पर यह दृष्टिकोण अच्छा नहीं है।
2. IE8 और निचला बॉक्स छाया का समर्थन नहीं करते हैं । हालाँकि, CSS3 PIE जैसे पुस्तकालयों का उपयोग करके इसे दूर किया जा सकता है।
3. के साथ इस्तेमाल किया जा सकता है, border-radiusलेकिन स्थिति के साथ वे एक चक्र (और संभवतः भी transform) पर अंक खोजने के लिए बहुत मुश्किल हो जाएगा ।

.dashed-box-shadow{
  position: relative;
  height: 120px;
  width: 120px;
  padding: 10px;
}
.dashed-box-shadow:before{ /* for border top and bottom */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 3px; /* height of the border top and bottom */
  width: 10px; /* width of the border top and bottom */
  background: blue; /* border color */
  box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
    0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
}
.dashed-box-shadow:after{ /* for border left and right */
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 10px; /* height of the border left and right */
  width: 3px; /* width of the border left and right */
  background: blue; /* border color */
  box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
    110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
}

<div class='dashed-box-shadow'>Some content</div>

Comments

यदि आप svg समाधान का उपयोग करने जा रहे हैं, तो मुझे सलाह है pointer-events:noneकि आप सामग्री के साथ बातचीत करने में सक्षम होने के लिए svg इन्वर्टर को जोड़ दें ।

— सोजज

अद्भुत जवाब।

— दोपहर

Answer 4

लघु एक: नहीं, यह नहीं है। आपको इसके बजाय छवियों के साथ काम करना होगा।

Comments

यह उत्तर 2018 तक पुराना है

— Godblessstrawberry

@WilliamHampshire मैं इस तकनीक के साथ जाना होगा youtu.be/vs34f9FiHps?t=779 लेकिन स्वीकार किए जाते हैं जवाब की जाँच करें, आप अन्य समाधान बेहतर पसंद कर सकते हैं

— godblessstrawberry

@godblessstrawberry धन्यवाद !! लेकिन यह एसवीजी का उपयोग कर रहा है इसलिए अभी भी सिर्फ सीएसएस का उपयोग नहीं कर रहा है ...

— विलियम हैम्पशायर

@WilliamHampshire थ्रेड में बॉक्स-शैडो सॉल्यूशन है जिसका मैं हैरी द्वारा जवाब देता हूं

— Godblessstrawberry

@godblessstrawberry क्या आपने समाधान की कोशिश की है? समाधान खंड द्वारा धराशायी लाइन खंड खींचा। यह सिर्फ एक पीओसी है और व्यवहार में बेकार है!

— यू जियान्रॉन्ग

Answer 5

@ कोवर्ट द्वारा बनाया गया एक ठंडा उपकरण है जिसे धराशायी बॉर्डर जनरेटर कहा जाता है ।

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

फिर आप इसे सीमा के स्थान पर अपने तत्व की पृष्ठभूमि संपत्ति के रूप में उपयोग करेंगे:

div {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  padding: 20px;
  display: inline-block;
}

Comments

यह एक सरल, आसान और त्वरित समाधान है

— jamesioppolo

यह अच्छी तरह से काम किया!

— केविन रफ़े

Answer 6

स्ट्रोक की लंबाई स्ट्रोक की चौड़ाई पर निर्भर करती है। आप चौड़ाई बढ़ाकर लंबाई बढ़ा सकते हैं और आंतरिक तत्व द्वारा सीमा के हिस्से को छिपा सकते हैं।

.thin {
    background: #F4FFF3;
    border: 2px dashed #3FA535;  
    position: relative;
}

.thin:after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #F4FFF3;
}

https://jsfiddle.net/ok6srt2z/

Comments

लेकिन इस तरह आप मूल तत्व की सामग्री पर क्लिक नहीं कर पाएंगे क्योंकि "के बाद" छद्मकरण इसे कवर करेगा। तो सबसे अच्छा तरीका एसवीजी का उपयोग है।

— ili4

आप pointer-events: noneओवरले समस्या को रोकने के लिए जोड़ सकते हैं ।

— बेंज जे

Answer 7

मैं अभी हाल ही में एक ही समस्या थी।

मैं इसे सीमा पर ले जाने वाले दो (पूरी तरह से क्षैतिज और एक ऊर्ध्वाधर के लिए) ले जाने और फिर उन्हें बदलने के साथ हल करने में कामयाब रहा। बाहरी बॉक्स को बस अपेक्षाकृत स्थिति में रखने की आवश्यकता है।

<div class="relative">
    <div class="absolute absolute--fill overflow-hidden">
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 4px 0px 4px 0px;
                transform: scaleX(2);
        "></div>
        <div class="absolute absolute--fill b--dashed b--red"
            style="
                border-width: 0px 4px 0px 4px;
                transform: scaleY(2);
        "></div>
    </div>

    <div> {{Box content goes here}} </div>
</div>

नोट: मैं इस उदाहरण में tachyons का इस्तेमाल किया है, लेकिन मुझे लगता है कि कक्षाएं आत्म-व्याख्यात्मक की तरह हैं।

Answer 8

यह div पर क्लास = "मायक्लास" का उपयोग करके एक नारंगी और ग्रे बॉर्डर बनाएगा।

.myclass {
    outline:dashed darkorange  12px;
    border:solid slategray  14px;
    outline-offset:-14px;
}

Comments

"धराशायी सीमाओं की उपस्थिति का अधिक नियंत्रण प्रदान करें", ओपी (मूल पोस्टर) का अर्थ है कि वह प्रत्येक डैश की लंबाई को नियंत्रित करना चाहता है, जैसा कि प्रश्न की शुरुआत में कहा गया है। किसी भी भ्रम के लिए क्षमा करें।

— स्काईलार