Recommandation de cours :

Fonction inset() CSS

Définition et utilisation inset() CSS

inset() La fonction définit un rectangle qui conserve une distance interne spécifiée par rapport à chaque côté de la boîte de référence. clip-path Attribut et shape-outside Utilisez ensemble les attributs.

Exemple

Exemple 1

Récoupez deux éléments <div> de sorte qu'ils soient des rectangles avec une distance interne spécifiée par rapport à chaque côté de la boîte de référence :

#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% arrondi 20px);
}

Essayez-le vous-même

Exemple 2

Utilisez clip-path et inset() Réaliser l'effet d'animation :

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

Essayez-le vous-même

Exemple 3

utilisés ensemble inset()、clip-path et shape-outside:

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

Essayez-le vous-même

Syntaxe CSS

inset(length-percentage arrondi border-radius)

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Pages associées

Référence :Attribut clip-path CSS

Référence :Propriété shape-outside de CSS

Référence :Fonction circle() CSS

Référence :Fonction ellipse() CSS

Référence :Fonction polygon() CSS