Border-image-width հատկություն

border-image-width հատկությունը կառավարում է եզրի տեսանելի մասի լայնությունը, մասշտաբավորում է այն: Եթե այս արժեքը մեծ է border-width-ից, եզրի նկարը կմտնի բովանդակության տակ:

Ավելի մանրամասն տեղեկությունների համար տեսեք border-image հատկությունը:

Շարահյուսություն

cssընտրիչ {
  border-image-width: CSS միավորներ | տոկոսներ | թիվ | auto;
}

Արժեքներ

Լռելյայն արժեքը՝ 1:

Օրինակ . Թիվ

Սահմանենք border-image-width-ի արժեքը 2 տարրի վրա մկնիկի դրվագման ժամանակ: Այս դեպքում եզրը կդառնա 26px*2 չափի - 2 անգամ ավելի մեծ, քան դրա լայնությունը, որը տրված է border-width-ում: Եզրը այս դեպքում կմտնա տեքստի տակ (ինչպես ֆոնը):

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

Результат:

Տեսեք նաև