Funkcja CSS inset()

Definicja i użycie

CSS inset() Funkcja definiuje prostokąt, który utrzymuje określoną wewnętrzną odległość od każdej strony ramki odniesienia.

inset() Funkcje są zazwyczaj używane z clip-path Atrybuty i shape-outside Atrybuty są używane razem.

Przykład

Przykład 1

Przesuń dwa elementy <div>, aby każdy z nich był wycięty na prostokąt, który utrzymuje określoną wewnętrzną odległość od każdej strony ramki odniesienia:

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

Spróbuj sam

Przykład 2

używając clip-path i inset() Realizacja efektu animacji:

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

Spróbuj sam

Przykład 3

łącznie inset(),clip-path i 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);
}

Spróbuj sam

Gramatyka CSS

inset(length-percentage round border-radius)

Szczegóły techniczne

Wsparcie przeglądarki

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Strony związane

Referencje:CSS property clip-path

Referencje:Atrybut shape-outside w CSS

Referencje:Funkcja CSS circle()

Referencje:Funkcja ellipse() w CSS

Referencje:Funkcja polygon() w CSS