Savybė border-image-outset

Savybė border-image-outset leidžia pastumti rėmelį už elemento ribų. Kaip reikšmė nurodomas skaičius be matavimo vienetų arba bet kokie dydžių vienetai, išskyrus procentus. Jei nurodytas skaičius be vienetų, tai jis yra daugiklis, iš kurio dauginamos savybės border-width reikšmės. Neigiamos reikšmės nepalaikomos.

Norėdami gauti išsamesnės informacijos apie paveikslėlius kraštui, žiūrėkite savybę border-image.

Sintaksė

cssselektorius {
  border-image-outset: teigiamas skaičius;
}

Pavyzdys . Skaičius

Nustatykime border-image-outset reikšmę į 3 užvedus pelės žymeklį ant elemento. Tuomet kraštas pasislinks 26px*3 - 3 kartus toliau, nei jos plotis, nustatytas border-width savybėje:

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

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

Результат:

Pavyzdys . Pikseliai

Nustatykime border-image-outset reikšmę į 30px užvedus pelės žymeklį ant elemento. Tuomet kraštas pasislinks 30px:

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

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

Результат:

Taip pat žiūrėkite