गुण border-image-width

गुण border-image-width बॉर्डर के दृश्यमान भाग की चौड़ाई को नियंत्रित करता है, इसका स्केल बदलता है। यदि यह मान border-width की चौड़ाई से अधिक है, तो बॉर्डर छवि सामग्री के नीचे चली जाएगी।

अधिक विस्तृत जानकारी के लिए गुण border-image देखें।

सिंटैक्स

cssसिलेक्टर {
  border-image-width: CSS इकाइयाँ | प्रतिशत | संख्या | auto;
}

मान

डिफ़ॉल्ट मान: 1।

उदाहरण . संख्या

एलिमेंट पर माउस होवर करने पर border-image-width का मान 2 पर सेट करें। इससे बॉर्डर का आकार 26px*2 हो जाएगा - border-width में निर्दिष्ट इसकी चौड़ाई से 2 गुना अधिक। बॉर्डर इसके बाद टेक्स्ट (फ़ॉन की तरह) के नीचे चली जाएगी:

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

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

Результат:

उदाहरण . border-image-repeat को round पर बदलें

पिछले उदाहरण में, होवर करने पर बॉर्डर में रोम्बस की पूरी संख्या नहीं होगी। इसे border-image-repeat को round मान पर सेट करके ठीक करें:

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

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

Результат:

उदाहरण . प्रतिशत

एलिमेंट पर माउस होवर करने पर border-image-width का मान 50% पर सेट करें। इससे बॉर्डर का आकार ब्लॉक के आकार का 50% हो जाएगा (यानी दाईं और बाईं दोनों बॉर्डर पूरे ब्लॉक को ढक लेंगी):

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

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

Результат:

उदाहरण . प्रतिशत

एलिमेंट पर माउस होवर करने पर border-image-width का मान 30% पर सेट करें। इससे बॉर्डर का आकार ब्लॉक के आकार का 30% हो जाएगा:

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

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

Результат:

उदाहरण . पिक्सेल

एलिमेंट पर माउस होवर करने पर border-image-width का मान 50px पर सेट करें:

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

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

Результат:

उदाहरण . मान auto

एलिमेंट पर माउस होवर करने पर border-image-width का मान auto पर सेट करें।

होवर करने से पहले border-image-width का मान 1 (डिफ़ॉल्ट) होता है। उदाहरण में विशेष रूप से border-width को 52px पर सेट किया गया है, और border-image-slice - 26 मान पर (auto का प्रभाव केवल तभी देखा जाएगा जब border-width, border-image-slice के बराबर न हो)। इसलिए कि border-image-width का मान 1 है, बॉर्डर छवि border-width की पूरी चौड़ाई घेर लेगी, यानी 52px तक फैल जाएगी। होवर करने पर border-image-width का मान auto पर सेट हो जाएगा और छवि की चौड़ाई border-image-slice के मान के बराबर हो जाएगी, यानी 26px:

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

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

Результат:

यह भी देखें