La propiedad CSS mask-clip especifica el área afectada por la máscara.
Sintaxis:
mask-clip: geometry-box values /* Or */ mask-clip: Keyword values /* Or */ mask-clip: Non-standard keyword values /* Or */ mask-clip: Multiple values /* Or */ mask-clip: Global values
Valores de la propiedad: Esta propiedad acepta los valores mencionados anteriormente y descritos a continuación:
- valores del cuadro de geometría: este valor de propiedad se refiere a los valores definidos con unidades como cuadro de contenido, cuadro de relleno, cuadro de borde, cuadro de margen, cuadro de relleno, cuadro de trazo, cuadro de vista, etc.
- Valores de palabra clave: este valor de propiedad se refiere a los valores definidos con unidades como sin clip, etc.
- Valores de palabras clave no estándar: este valor de propiedad se refiere a los valores definidos con unidades como borde, relleno, contenido, texto, etc.
- Valores múltiples: este valor de propiedad se refiere a los valores definidos con unidades como padding-box, no-clip, view-box, fill-box, border-box , etc.
- Valores globales: este valor de propiedad se refiere a los valores definidos con unidades como heredar, inicial, unset, etc.
Ejemplo 1: El siguiente ejemplo ilustra la propiedad mask-clip usando border-box :
css
<!DOCTYPE html>
<html>
<head>
<style>
.geeks{
width:50%;
height:100px;
background:green;
border:10px solid red;
padding:10px;
-webkit-mask-image:url(image.svg);
mask-clip: border-box;
}
</style>
</head>
<body>
<div class="geeks" >
GeeksforGeeks is Computer Science portal.
GeeksforGeeks is Computer Science portal.
GeeksforGeeks is Computer Science portal.
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra la propiedad mask-clip usando padding-box :
css
<!DOCTYPE html>
<html>
<head>
<style>
.geeks{
width:50%;
height:100px;
background:green;
border: 5px solid red;
padding:10px;
-webkit-mask-image:url(image.svg);
mask-clip: padding-box;
}
</style>
</head>
<body>
<div class="geeks" >
GeeksforGeeks is Computer Science portal.
GeeksforGeeks is Computer Science portal.
GeeksforGeeks is Computer Science portal.
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- cromo 1
- Borde 79
- Ópera 15
- Safari 15.4
- Internet Explorer (no compatible).
- Firefox 53
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA