La propiedad de clip especifica la definición de qué parte de un elemento absolutamente posicionado desea hacer visible. Excepto por la región especificada, el resto de las demás regiones están ocultas. La propiedad de clip solo se aplica al elemento posicionado absolutamente, es decir, el elemento que tiene la posición: absoluta o posición: fija .
Sintaxis:
clip: auto|shape|initial|inherit;
Nota:
- La propiedad de clip CSS no funcionará para » overflow: visible «.
- La propiedad clip ahora está en desuso y será reemplazada por la propiedad clip-path .
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
auto: Es el valor por defecto, no habrá recorte. El elemento se muestra tal como es.
Sintaxis:
clip: auto;
Ejemplo: este ejemplo ilustra el uso de la propiedad de recorte cuyo valor se establece en automático y que no aplicará ningún recorte a la región especificada.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | clip Property </title>
<style>
.shape {
position: absolute;
background: #0F9D58;
width: 200px;
height: 200px;
color: #ffffff;
text-align: center;
}
#clip_property {
clip: auto;
}
</style>
</head>
<body>
<p class="shape" id="clip_property"> GeeksforGeeks </p>
</body>
</html>
Producción:
forma: la forma recorta la parte definida del elemento. Rect(arriba, derecha, abajo, izquierda) se usa para definir la parte visible.
Sintaxis:
clip: rect(top, right, bottom, left);
Ejemplo: este ejemplo ilustra el uso de la propiedad de recorte cuyo valor se establece en la forma específica que recorta la parte especificada de un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | clip Property </title>
<style>
.shape {
position: absolute;
background: #0F9D58;
width: 200px;
height: 200px;
color: #ffffff;
text-align: center;
}
#clip_property {
clip: rect(0px, 120px, 100px, 0px);
}
</style>
</head>
<body>
<p class="shape" id="clip_property"> GeeksforGeeks </p>
</body>
</html>
Producción:
initial: initial establece el valor predeterminado, es decir, no habrá ningún recorte ya que el valor predeterminado es automático.
Sintaxis:
clip: initial;
Ejemplo: Este ejemplo ilustra el uso de la propiedad clip cuyo valor se establece en initial.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | clip Property </title>
<style>
.shape {
position: absolute;
background: #0F9D58;
width: 200px;
height: 200px;
color: #ffffff;
text-align: center;
}
#clip_property {
clip: initial;
}
</style>
</head>
<body>
<p class="shape" id="clip_property"> GeeksforGeeks </p>
</body>
</html>
Producción:
heredar: heredar recibe la propiedad del elemento principal. Cuando se usa con el elemento raíz, se usará la propiedad inicial.
Sintaxis:
clip: inherit;
Ejemplo: Este ejemplo ilustra el uso de la propiedad de clip cuyo valor se establece en heredar.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | clip Property </title>
<style>
.shape {
position: absolute;
background: #0F9D58;
width: 200px;
height: 200px;
color: #ffffff;
text-align: center;
}
.shape1 {
border: solid;
border-color: black;
position: absolute;
background: #ffffff;
width: 200px;
height: 200px;
color: #0F9D58;
text-align: center;
}
#clip_property {
clip: rect(0px, 120px, 100px, 0px);
}
#clip_property1 {
clip: inherit;
}
</style>
</head>
<body>
<div class="shape" id="clip_property">
<p> GeeksforGeeks </p>
<div class="shape1" id="clip_property1">
<p> GeeksGeeks </p>
</div>
</div>
<!-- Here clip_property1 inherits the
clip property from clip_property -->
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de clip se enumeran a continuación:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 7.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por gribeshdhakal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA