blob: 13e84c6be1e0eb6c3889a32ccd561b3ce1bb3ba5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
---
title: mask-clip
slug: Web/CSS/mask-clip
translation_of: Web/CSS/mask-clip
browser-compat: css.properties.mask-clip
---
{{CSSRef}}
La propriété [CSS](/fr/docs/Web/CSS) **`mask-clip`** définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.
```css
/* Valeurs de type <geometry-box> */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;
/* Valeurs avec un mot-clé */
mask-clip: no-clip;
/* Mots-clés non-standards */
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;
/* Valeurs multiples */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;
/* Valeurs globales */
mask-clip: inherit;
mask-clip: initial;
mask-clip: revert;
mask-clip: unset;
```
## Syntaxe
Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.
### Valeurs
- `content-box`
- : La partie qui est peinte est rognée sur la boîte de contenu.
- `padding-box`
- : La partie qui est peinte est rognée sur la boîte de remplissage (<i lang="en">padding</i>).
- `border-box`
- : La partie qui est peinte est rognée sur la boîte de bordure.
- `margin-box`
- : La partie qui est peinte est rognée sur la boîte de marge.
- `fill-box`
- : La partie qui est peinte est rognée sur la boîte contenant l'objet.
- `stroke-box`
- : La partie qui est peinte est rognée sur la boîte contenant le contour.
- `view-box`
- : C'est le <i lang="en">viewport</i> du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée le <i lang="en">viewport</i>, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîte sont basées sur la hauteur et la largeur de l'attribut `viewBox`.
- `no-clip`
- : La partie qui est peinte n'est pas rognée.
- `border` {{non-standard_inline}}
- : Synonyme de `border-box`.
- `padding` {{non-standard_inline}}
- : Synonyme de `padding-box`.
- `content` {{non-standard_inline}}
- : Synonyme de `content-box`.
- `text` {{non-standard_inline}}
- : L'image est rognée selon la forme du texte de l'élément.
## Définition formelle
{{cssinfo}}
## Syntaxe formelle
{{csssyntax}}
## Exemples
Vous pouvez modifier la valeur `mask-clip` dans l'exemple qui suit. Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de `-webkit-mask-clip`.
{{EmbedGHLiveSample("css-examples/masking/mask-clip.html", '100%', 800)}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [Rognage et masquage en CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)
|
