Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
If a -webkit-mask-image is specified, -webkit-mask-clip determines the mask image's clipping behavior.
| Initial value | border |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animatable | no |
| Canonical order | order of appearance in the formal grammar of the values |
Syntax
<clip-style>[, <clip-style>]*
Where:
- <clip-style>
border | padding | content | text
Values
- border
- If
borderis specified, the mask image extends to the border of the element. - padding
- If
paddingis specified, the mask image extends to the padding of the element. - content
- If
contentis specified, the mask image clips to the content of the element. - text
- If
textis specified, the mask image clips to the text of the element.
Examples
div {
-webkit-mask-image: url('images/mask.png');
-webkit-mask-clip: padding;
}
Browser Compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | Not supported | Not supported | Not supported | 4.0 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 2.1 | Not supported | Not supported | Not supported | 3.2 |
See also
-webkit-mask, -webkit-mask-origin, -webkit-mask-box-image, -webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat