clip
Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.
Attention :
Cette propriété est dépréciée, on utilisera clip-path à la place.
La propriété CSS clip définit la portion visible d'un élément. La propriété clip s'applique uniquement aux éléments positionnés de façon absolue (c'est-à-dire qui ont position:absolute ou position:fixed).
/* Valeur avec un mot-clé */
clip: auto;
/* Valeur de type <shape> */
clip: rect(1px, 10em, 3rem, 2ch);
/* Valeurs globales */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;
Syntaxe
Valeurs
<shape>-
Une forme (type
<shape>) rectangulaire avec la structurerect(<haut>, <droit>, <bas>, <gauche>). Les valeurs<haut>et<bas>sont des décalages à partir du bord intérieur haut de la bordure de la boîte, tandis que<droit>et<gauche>sont des décalages à partir du bord intérieur gauche de la bordure de la boîte, c'est-à-dire la délimitation de la zone de remplissage (padding).Les valeurs
<haut>,<droit>,<bas>, et<gauche>peuvent être exprimées avec une longueur (valeur de type<length>) ouauto. Si l'une des valeurs estauto, l'élément est rogné sur le bord intérieur de la bordure du côté correspondant. auto-
L'élément n'est pas rogné (par défaut). Attention, le comportement est différent de celui obtenu avec
rect(auto, auto, auto, auto), qui rogne l'élément aux bords intérieurs de la bordure.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | éléments positionnés de manière absolue |
| Héritée | non |
| Valeur calculée | auto si spécifié comme auto, sinon un rectangle avec quatre valeurs dont chacune vaut auto si elles sont spécifiées comme auto sinon, la longueur calculée |
| Type d'animation | un rectangle |
Syntaxe formelle
clip =
<rect()> |
auto
<rect()> =
rect( <top> , <right> , <bottom> , <left> )
Exemples
Rogner une image
CSS
.dotted-border {
border: dotted;
position: relative;
width: 390px;
height: 400px;
}
#top-left,
#middle,
#bottom-right {
position: absolute;
top: 0;
}
#top-left {
left: 400px;
clip: rect(0, 130px, 90px, 0);
}
#middle {
left: 270px;
clip: rect(100px, 260px, 190px, 130px);
}
#bottom-right {
left: 140px;
clip: rect(200px, 390px, 290px, 260px);
}
HTML
<p class="dotted-border">
<img src="macarons.png" title="Image originale" />
<img id="top-left" src="macarons.png" title="Image rognée en haut à gauche" />
<img id="middle" src="macarons.png" title="Image rognée au centre" />
<img
id="bottom-right"
src="macarons.png"
title="Image rognée en bas à droite" />
</p>
Résultat
Spécifications
| Specification |
|---|
| CSS Masking Module Level 1 # clip-property |
Compatibilité des navigateurs
Chargement…
Voir aussi
- Cette propriété est dépréciée, on utilisera
clip-pathà la place. - Les propriétés CSS connexes :