Funzione inset() CSS

Definizione e uso

CSS inset() La funzione definisce un rettangolo che mantiene una distanza specificata dall'angolo interno di ogni lato del riquadro di riferimento.

inset() Le funzioni sono solitamente usate con clip-path Proprietà e shape-outside Usare insieme le proprietà.

Esempio

Esempio 1

Tagliare due elementi <div> in rettangoli che mantengono una distanza specificata dall'angolo interno di ogni lato del riquadro di riferimento:

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

Prova personalmente

Esempio 2

Usare clip-path e inset() Realizzare l'effetto animazione:

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

Prova personalmente

Esempio 3

usati insieme inset()、clip-path e 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);
}

Prova personalmente

Sintassi CSS

inset(length-percentage round border-radius)

Dettagli tecnici

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione per la prima volta.

Pagina correlata

Riferimento:Proprietà CSS clip-path

Riferimento:Proprietà CSS shape-outside

Riferimento:Funzione circle() CSS

Riferimento:Funzione CSS ellipse()

Riferimento:Funzione CSS polygon()