Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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 letableau 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 utiliseraclip-path à la place.
La propriétéCSSclip définit la portion visible d'un élément. La propriétéclip ne s'applique qu'aux éléments positionnés absolument — c'est-à-dire les éléments avecposition:absolute ouposition:fixed.
Syntaxe
/* 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;Valeurs
rect()Un rectangle défini à l'aide d'une fonction
rect()de la formerect(<top>, <right>, <bottom>, <left>). Les valeurs<top>et<bottom>sont des décalages par rapport au _bord supérieur de la boîte, tandis que<right>et<left>sont des décalages par rapport au _bord gauche de la boîte - c'est-à-dire l'étendue de la marge de remplissage de boîte.Les valeurs
<top>,<right>,<bottom>et<left>peuvent être soit une longueur (<length>) soitauto. Si la valeur d'un côté estauto, l'élément est rogné sur lebord intérieur de la bordure de ce côté.
Note :La fonctionrect()<shape> utilisée dans la propriété dépréciéeclip est différente de la fonction CSSrect() utilisée pour définir une<basic-shape> CSS.
autoL'é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 défini commeauto, sinon un rectangle avec quatre valeurs dont chacune vautauto si elles sont définies commeauto sinon, la longueur calculée |
| Type d'animation | unrectangle |
Syntaxe formelle
clip =
<rect()>|
auto
<rect()> =
rect(<top> ,<right> ,<bottom> ,<left>)
Exemples
Rogner une image
<p> <img src="macarons.png" title="Image originale" /> <img src="macarons.png" title="Image rognée en haut à gauche" /> <img src="macarons.png" title="Image rognée au centre" /> <img src="macarons.png" title="Image rognée en bas à droite" /></p>.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);}Spécifications
| Specification |
|---|
| CSS Masking Module Level 1 # clip-property |
Compatibilité des navigateurs
Voir aussi
- La propriété
clip-path - La propriété
position - La propriété
mask - La propriété
shape-image-threshold - La propriété
shape-outside