Función inset() de CSS

Definición y uso

CSS inset() La función define un rectángulo que mantiene una distancia incrustada específica con cada lado del cuadro de referencia.

inset() Funciones suelen utilizarse con clip-path Propiedades y shape-outside Propiedades utilizadas juntas.

Ejemplo

Ejemplo 1

Cortar dos elementos <div> para que sean rectángulos con un desplazamiento incrustado especificado para cada lado del cuadro de referencia:

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

Prueba por ti mismo

Ejemplo 2

usar clip-path y inset() Realizar efecto de animación:

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

Prueba por ti mismo

Ejemplo 3

utilizados conjuntamente inset()、clip-path y 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);
}

Prueba por ti mismo

Sintaxis de CSS

inset(length-percentage round border-radius)

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Páginas relacionadas

Referencia:Atributo clip-path de CSS

Referencia:Atributo shape-outside de CSS

Referencia:Función circle() de CSS

Referencia:Función ellipse() de CSS

Referencia:Función polygon() de CSS