CSS inset() Funktion

Definition und Verwendung

CSS- inset() Funktion definiert einen Rechteck, der jeden Seitenabstand des Referenzrahmens aufweist.

inset() Funktionen werden normalerweise mit clip-path Attribute und shape-outside Attribute zusammen verwenden.

Beispiel

Beispiel 1

Zwei <div>-Elemente so zugeschnitten, dass sie mit einem Referenzrahmen jeden Seitenabstand aufweisen, der angegeben ist:

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

Versuchen Sie es selbst

Beispiel 2

Verwenden Sie clip-path und inset() Animationswirkung realisieren:

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

Versuchen Sie es selbst

Beispiel 3

kombiniert verwenden inset()、clip-path und 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);
}

Versuchen Sie es selbst

CSS-Syntax

inset(length-percentage round border-radius)

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Browserversion dar, die die Funktion erstmals vollständig unterstützt.

Verwandte Seiten

Referenz:CSS clip-path Eigenschaft

Referenz:CSS shape-outside-Eigenschaft

Referenz:CSS circle() Funktion

Referenz:CSS ellipse() Funktion

Referenz:CSS polygon() Funktion