Īpašība border-image-width

Īpašība border-image-width kontrolē redzamās robežas daļas platumu, mērogo to. Ja šī vērtība ir lielāka par border-width platumu, robežas attēls ieslīdīs zem satura.

Lai iegūtu sīkāku informāciju, skatiet īpašību border-image.

Sintakse

cssselektors {
  border-image-width: CSS vienības | procenti | skaitlis | auto;
}

Vērtības

Noklusējuma vērtība: 1.

Piemērs . Skaitlis

Iestatīsim border-image-width vērtību uz 2 , kad peles kursors atrodas virs elementa. Šajā gadījumā robežas izmērs kļūs 26px*2 - 2 reizes lielāks nekā tās platums, kas norādīts border-width. Robeža šajā gadījumā ieslīdīs zem teksta (kā fons):

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

Результат:

Piemērs . Mainīsim border-image-repeat uz round

Iepriekšējā piemērā, kad peles kursors atrodas virs elementa, robežā būs nevesels rombu skaits. Izlabosim to, iestatot border-image-repeat uz vērtību 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;
}

Результат:

Piemērs . Procenti

Iestatīsim border-image-width vērtību uz 50% , kad peles kursors atrodas virs elementa. Šajā gadījumā robežas izmērs kļūs 50% no bloka izmēra (tas nozīmē, ka divas robežas, labā un kreisā, segs visu bloku):

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

Результат:

Piemērs . Procenti

Iestatīsim border-image-width vērtību uz 30% , kad peles kursors atrodas virs elementa. Šajā gadījumā robežas izmērs kļūs 30% no bloka izmēra:

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

Результат:

Piemērs . Pikseļi

Iestatīsim border-image-width vērtību uz 50px, kad peles kursors atrodas virs elementa:

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

Результат:

Piemērs . Vērtība auto

Iestatīsim border-image-width vērtību uz auto, kad peles kursors atrodas virs elementa.

Pirms kursora novietošanas virs border-image-width vērtība ir 1 (pēc noklusējuma). Piemērā border-width speciāli iestatīts uz 52px, un border-image-slice - uz vērtību 26 (auto efekts tiks novērots tikai tad, ja border-width nav vienāds ar border-image-slice). Tāpēc, ka border-image-width ir vērtība 1, robežas attēls aizņems visu border-width platumu, tas ir, izstiepsies uz 52px. Kad peles kursors atrodas virs elementa vērtība border-image-width tiks iestatīta uz auto un attēla platums kļūs vienāds ar vērtību border-image-slice, tas ir, 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;
}

Результат:

Skatiet arī