CSS inset() funksjon

Definisjon og bruk

CSS inset() Funksjonen definerer en rektangel som holder en bestemt innlemmet avstand til hver side av referansekassen.

inset() Funksjonene brukes vanligvis sammen med clip-path Egenskapene og shape-outside Bruk egenskapene sammen.

Eksempel

Eksempel 1

Klipp to <div>-elementer til rektangler som holder en bestemt innlemmet avstand til hver side av referansekassen:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(15px);
}
#pinkDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: pink;
  clip-path: inset(5% 10% 15% 10% round 20px);
}

Prøv selv

Eksempel 2

Bruk clip-path og inset() Oppnå animasjonseffekt:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: inset(10% round 20px);
}
@keyframes mymove {
  50% {clip-path: inset(50% round 50px);}
}

Prøv selv

Eksempel 3

brukes sammen inset(),clip-path og shape-outside:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
}

Prøv selv

CSS syntaks

inset(length-percentage round border-radius)

Teknisk detalj

Nettleserstøtte

Tallene i tabellen viser den første nettleserversjonen som fullt ut støtter denne funksjonen.

Relaterede sider

Referencer:CSS clip-path egenskab

Referencer:CSS shape-outside egenskab

Referencer:CSS circle() funktion

Referencer:CSS ellipse() funktion

Referencer:CSS polygon() funktion