Propriété CSS clip

La propriété clip permet le rectangle de couper un élément positionné. Le rectangle est spécifié comme en tant que quatres coordonnées: top, right, bottom, left. Les valeurs top et bottom spécifient des décalages depuis le bord intérieur supérieur de la boîte, tandis que les valeurs de right et left spécifient des décalages depuis le bord intérieur droit de la boîte. Tous les quatres côtés peuvent être length ou auto. "Auto" est la valeur initiale.

Valeur initiale auto
Appliquée à Les éléments de la position "absolute".
Héritée Non.
Animable Oui. Background-color est animable.
Version CSS2
Syntaxe DOM object.style.clip = "rect(10px,40px,40px,10px)";

Syntaxe

clip: auto | shape | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      position: absolute;
      clip: auto;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

Dans l'exemple suivant, le rectangle coupe l'image par rapport aux valeurs définies.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      position: absolute;
      clip: rect(0px,70px,200px,0px);
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

Valeurs

Valeur Description
auto Ne coupe pas un élément. C'est la valeur initiale.
shape Coupe un élément. La seule valeur valide est : rect (top, right, bottom, left).
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Trouvez-vous cela utile?

Articles Associées