CSS - clipe

Descrição

A propriedade clip define a área fora da qual o conteúdo de um elemento absolutamente posicionado não é visível.

Valores possíveis

auto - A região de recorte é equivalente à área de conteúdo do elemento posicionado.
shape- Um descritor de forma. No CSS2, há apenas uma forma válida: rect (canto superior direito inferior esquerdo).

Aplica-se a

nível de bloco e elementos substituídos.

Sintaxe DOM

object.style.clip = rect(top right bottom left);

Exemplo

Aqui está o exemplo que mostra o efeito desta propriedade -

<html>
   <head>
      <style type = "text/css">
         div {
            background: url(/images/css.gif);
            clip:rect(10px, 155px, 145px, 10px);
            border:2px solid black;
            height:100px;
            width:150px;
            position:absolute;
            top:inherit;
            left:0px;
         }
      </style>
   </head>

   <body>
      <div>Example of clipping one image using css clip property</div>
   </body>
</html>

Isso produzirá o seguinte resultado -

↰ Previous page