⌘K

Egenskapen border-image-slice

Egenskapen border-image-slice forteller nettleseren hvilke deler av bildet som skal gå til hjørnene, og hvilke som skal gå til sidene (og hvilken del som skal være sentral). Til hjørnene går 4 deler, til sidene går 4 deler og én del (den sentrale) går til bakgrunnen til elementet (valgfritt, nøkkelordet fill).

For mer detaljert informasjon, se egenskapen border-image.

Syntaks

<+css+> velger { border-image-slice: fra 1. til 4. tall | fra 1. til 4. prosenter; } <-css->

Med tall og prosenter mellomrom kan nøkkelordet fill stå.

Verdier

Verdi Beskrivelse
prosenter Prosent beregnes i forhold til størrelsen på bildet. Horisontale i forhold til bredden, vertikale — i forhold til høyden.
tall Tall er piksler (for rasterbilde) eller koordinater (for vektorbilde). Måleenheter angis ikke.
fill Standardatferden forutsetter at den sentrale delen av bildet blir forkastet. For å bruke den, må du bruke nøkkelordet fill i tillegg til tall eller prosenter.

Antall parametere

Forskyvning kan ta 1, 2, 3 eller 4 parametere. Vær oppmerksom på at måleenheter for forskyvning ikke skrives (for eksempel bare 20, ikke 20px). Du kan også angi tykkelse i %.

Antall parametere Beskrivelse
1 Tykkelse for alle sider samtidig.
2 1 2; - 1px for topp og bunn, 2px for venstre og høyre.
3 1 2 3; - 1px for topp, 2px for venstre og høyre, 3px for bunn.
4 1 2 3 4; - 1px for topp, 2px for høyre, 3px for bunn, 4px for venstre.

Standardverdi: 100%(?).

Eksempel

html<div id="elem"></div>
css#elem {
  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;
}

Результат:

Eksempel

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

Результат:

Se også

BackEgenskapen border-image-sourceNextEgenskapen border-image-repeat