Uma breve análise das propriedades do clipe CSS

O atributo clip é um atributo relativamente útil, mas geralmente é raro em aplicações práticas, e 52CSS.com apresenta muito poucos dele. Dois pontos a serem observados ao aplicar o atributo clip:
1. O atributo clip deve ser usado junto com o atributo de posicionamento position para ter efeito.
2. As coordenadas de cálculo do corte do clipe são calculadas a partir do canto superior esquerdo, ou seja, o ponto (0,0), conforme mostrado na Figura 3. Isso é diferente do preenchimento e da margem da margem direita e da margem inferior de ambos. eles são do ponto mais à direita e contados de baixo.

Sintaxe básica do atributo clip:


descrição do atributo do clipe:
Recupera ou define a área visível de um objeto. As partes fora da área de visualização são transparentes.
Esta propriedade define o tamanho da área visível de um objeto posicionado de forma absoluta. O valor da propriedade position deve ser definido como absoluto para que esta propriedade seja usada.
Esta propriedade está disponível em plataformas MAC começando com IE5.
A propriedade de script correspondente é clip .
Além de criar texto colorido, o atributo clip em CSS também pode cortar elementos de outras páginas da web com eficácia.

O atributo clip define a forma do elemento. Esta propriedade é usada para definir um retângulo de recorte. Apenas o conteúdo dentro deste retângulo é visível, e o conteúdo fora desta área de recorte tem o mesmo efeito que overflow:hidden. A área de recorte pode ser maior ou menor que a área de conteúdo do elemento.
valor do atributo do clipe: auto | rect (superior, direita, inferior, esquerda)
Auto significa sem corte. As quatro direções em retângulo devem ser preenchidas com valores numéricos, indicando a posição do corte.
Abaixo darei um exemplo simples de corte de uma imagem.
Primeiro prepare uma imagem, conforme mostrado na Figura 1, seu tamanho é 159px*99 pixels. Pretendo usar o atributo clip para cortar a imagem de forma que apenas o grande ponto vermelho da imagem seja exibido.
Primeiro crio um quadro div para colocar a imagem. Seu CSS é definido da seguinte forma:


O atributo de posicionamento desta div é definido como posicionamento relativo para usá-lo como padrão de posicionamento da imagem. O fundo é definido como #FFF985 para tornar o efeito de exibição mais óbvio.
Em seguida, defina as propriedades de corte da imagem. A definição CSS é a seguinte:


O posicionamento absoluto aqui é relativo ao div com o id de imgClip. Os valores no clipe são organizados na ordem superior, direita, inferior e esquerda.
código HTML: