NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Función CSS : inset()

30 de Diciembre del 2020 por Josep Antoni Bover. 0 visitas, 0 comentarios, 0 votos
Categorías : CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...

Esta función recorta el área visible del objeto al tamaño del rectángulo especificado.

Solo se puede utilizar en la propiedad clip-path.


Sintaxis

Animación
inset( top left right borrom );

Los valores se pueden especificar con cualquier tipo de unidad de tamaño relativa válida. Para más información consulta la Referencia CSS : Unidades.

Podemos especificar hasta 4 valores (uno por cada costado).
Si especificamos solo un valor, se aplicará a los 4 costados.
Si especificamos 2 valores, el primer valor se asignará a top / bottom, y el segundo valor a left / right.
Si especificamos 3 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom.
Si especificamos 4 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom, y el cuarto al left.
Por ejemplo :
1
2
3
4
clip-path:inset(10px); /* 10 píxeles para el top, bottom, left, right */
clip-path:inset(10px 20px); /* 10 píxeles para el top y bottom, 20 píxeles para el left y right */
clip-path:inset(10px 20px, 30px); /* 10 píxeles para el top, 20 píxeles para el left y right, 30 píxeles para el bottom */
clip-path:inset(10px 20px, 30px, 40px); /* 10 píxeles para el top, 20 píxeles para el right, 30 píxeles para el bottom, 40 píxeles para el left */

Código de ejemplo



Compatibilidad

Esta propiedad es soportada por todos los navegadores compatibles con CSS3.

Soportado a partir de la versión 24
Soportado a partir de la versión 3.5
Soportado a partir de la versión 12
NO soportado
NO soportado

Documento modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020

Enlaces relacionados