CSS inset() functie

definitie en gebruik

CSS van inset() de functie definieert een rechthoek die een specifieke ingesloten afstand tot elke zijde van het referentiel frame behoudt.

inset() functies worden meestal samen gebruikt met clip-path eigenschappen en shape-outside eigenschappen samen gebruiken.

voorbeeld

voorbeeld 1

maak twee <div>-elementen afgesneden tot rechthoeken die een specifieke ingesloten afstand tot elke zijde van het referentiel frame behouden:

#blueDIV {
  float: left;
  breedte: 150px;
  hoogte: 100px;
  achtergrondkleur: lightblue;
  clip-path: inset(15px);
}
#pinkDIV {
  float: left;
  breedte: 150px;
  hoogte: 100px;
  achtergrondkleur: roze;
  clip-path: inset(5% 10% 15% 10% round 20px);
}

probeer het zelf

voorbeeld 2

gebruik clip-path en inset() realiseer animatie-effecten:

#myDIV {
  breedte: 100px;
  hoogte: 100px;
  achtergrondkleur: coral;
  kleur: green;
  animation: mymove 5s infinite;
  clip-path: inset(10% round 20px);
}
@keyframes mymove {
  50% {clip-path: inset(50% round 50px);}
}

probeer het zelf

voorbeeld 3

gebruik samen inset()、clip-path en shape-outside:

#blueDIV {
  float: left;
  breedte: 150px;
  hoogte: 100px;
  achtergrondkleur: lightblue;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
}

probeer het zelf

CSS syntaxis

inset(length-percentage round border-radius)

technische details

browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

gerelateerde pagina's

Referentie:CSS clip-pad eigenschap

Referentie:CSS shape-outside eigenschap

Referentie:CSS circle() functie

Referentie:CSS ellipse() functie

Referentie:CSS polygon() functie