El atributo clip es un atributo relativamente útil, pero a menudo es raro en aplicaciones prácticas y 52CSS.com presenta muy pocos de él. Dos puntos a tener en cuenta al aplicar el atributo de clip:
1. El atributo de clip debe usarse junto con la posición del atributo de posicionamiento para que surta efecto.
2. Las coordenadas de cálculo del recorte del clip se calculan desde la esquina superior izquierda, es decir, el punto (0,0), como se muestra en la Figura 3. Esto es diferente al relleno y al margen El margen derecho y el margen inferior de ambos. son desde el punto más a la derecha y contando desde abajo.
Sintaxis básica del atributo de clip: 
Código fuente de ejemplo
[www.downcodes.com] clip: auto | rect (número número número número)
Valor:
automático: valor predeterminado. Sin recorte de objetos
rect (número número número número): proporciona cuatro valores de desplazamiento calculados desde la esquina superior izquierda del objeto para la coordenada (0,0) en el orden arriba-derecha-abajo-izquierda. se puede reemplazar con auto, es decir, este lado no cortar
Recupera o establece el área visible de un objeto. Las partes fuera del área de visualización son transparentes.
Esta propiedad define el tamaño del área visible de un objeto en posición absoluta. El valor de la propiedad de posición debe establecerse en absoluto para poder utilizar esta propiedad.
Esta propiedad está disponible en plataformas MAC a partir de IE5.
La propiedad del script correspondiente es clip .
Además de crear texto en color, el atributo de clip en CSS también puede recortar elementos de manera efectiva en otras páginas web.
El atributo de clip establece la forma del elemento. Esta propiedad se utiliza para definir un rectángulo de recorte. Solo el contenido dentro de este rectángulo es visible y el contenido fuera de esta área de recorte tiene el mismo efecto que desbordamiento: oculto. El área de recorte puede ser mayor o menor que el área de contenido del elemento.
valor del atributo del clip: auto | rect (arriba, derecha, abajo, izquierda)
Auto significa no recortar. Las cuatro direcciones en rect deben llenarse con valores numéricos, indicando la posición de recorte.
A continuación daré un ejemplo sencillo de cómo recortar una imagen.
Primero prepare una imagen, como se muestra en la Figura 1, su tamaño es 159px*99 píxeles. Planeo usar el atributo de clip para recortar la imagen de modo que solo se muestre el gran punto rojo en la imagen.
Primero creo un marco div para colocar la imagen. Su CSS se define de la siguiente manera:
Código fuente de ejemplo
[www.downcodes.com] #imgClip {
posición: relativa;
ancho: 159px;
altura: 99 píxeles;
antecedentes:#FFF985;
margen:0 automático;
}
El atributo de posicionamiento de este div se establece en posicionamiento relativo para usarlo como estándar de posicionamiento para la imagen. El fondo se define como #FFF985 para que el efecto de visualización sea más obvio.
Luego defina las propiedades de recorte de la imagen. La definición CSS es la siguiente:
Código fuente de ejemplo
[www.downcodes.com] #imgClip img {
posición:absoluta;
clip:rect(21px 68px 51px 38px);
}
El posicionamiento absoluto aquí es relativo al div con la identificación de imgClip. Los valores en el clip están ordenados arriba, derecha, abajo e izquierda.
código html:
Código fuente de ejemplo
[www.downcodes.com] <div id="imgClip">
<img src="" ancho="159" alto="99" />
</div>
