बॉर्डर-इमेज-रिपीट गुण

border-image-repeat गुण बॉर्डर के आंतरिक भाग को छवि के रूप में दोहराने का तरीका निर्धारित करता है। अधिक जानकारी के लिए border-image गुण देखें।

सिंटैक्स

cssसेलेक्टर {
  border-image-repeat: stretch | repeat | round;
}

मान

डिफ़ॉल्ट मान: stretch.

पैरामीटर की संख्या

1 या 2 पैरामीटर ले सकता है। यदि दो पैरामीटर दिए गए हैं, तो उनमें से पहला ऊपरी और निचली बॉर्डर के लिए होगा, और दूसरा पैरामीटर - बाएं और दाएं के लिए।

उदाहरण . stretch मान

html<div id="elem"></div>

css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: stretch;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

उदाहरण . repeat मान

html<div id="elem"></div>

css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: repeat;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

उदाहरण . round मान

अब सामान्य स्थिति में repeat मान सेट है, और होवर पर - round। ध्यान दें कि होवर से पहले बॉर्डर में रोम्बस की पूर्ण संख्या नहीं है, जबकि होवर के बाद - पूर्ण संख्या है। इस तरह round काम करता है:

html<div id="elem"></div>

css#elem:hover {
  border-image-repeat: round;
}
#elem {
  border-style: solid;
  border-width: 42px;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: repeat;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

उदाहरण . दो शब्द

चौड़ाई के लिए repeat मान और ऊंचाई के लिए stretch मान:

html<div id="elem"></div>

css#elem {
  border-image-repeat: repeat stretch;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

यह भी देखें