Maskowanie CSS
Źródło: CSS Masking Module Level 1
clip
- Wartość
rect() | auto- Inicjalizacja
- auto
- Zastosowanie
- elementy pozycjonowane absolutnie
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
clip-path
Kształt obcinania
- Wartość
<clip-source> | [ <basic-shape> || <geometry-box> ] | none- Inicjalizacja
- none
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
clip-rule
Reguły obcinania
- Wartość
nonzero | evenodd- Inicjalizacja
- nonzero
- Zastosowanie
- elementy grafiki SVG
- Dziedziczenie
- tak
- Procenty
- nie
- Media
- visual
mask
Atrybuty mieszane maski
- Wartość
<mask-layer>- Inicjalizacja
- zobacz cechy indywidualne
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- zobacz cechy indywidualne
- Media
- visual
mask-border
Atrybuty mieszane maski obrazka obramowania
- Wartość
<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>- Inicjalizacja
- zobacz cechy indywidualne
- Zastosowanie
- zobacz cechy indywidualne
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-border-mode
Tryb maski obrazka obramowania
- Wartość
luminance | alpha- Inicjalizacja
- alpha
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-border-outset
Nawis krawędzi
- Wartość
[ <length> | <number> ]{1,4}- Inicjalizacja
- 0
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-border-repeat
Powtarzanie maski obrazka obramowania
- Wartość
[ stretch | repeat | round | space ]{1,2}- Inicjalizacja
- stretch
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-border-slice
Obcięcie maski obrazka obramowania
- Wartość
<number-percentage>{1,4} fill?- Inicjalizacja
- 0
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- odnosi się do rozmiaru maski obrazka obramowania
- Media
- visual
mask-border-source
Źródło maski obrazka obramowania
- Wartość
none | <image>- Inicjalizacja
- none
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-border-width
Szerokość maski obrazka obramowania
- Wartość
[ <length-percentage> | <number> | auto ]{1,4}- Inicjalizacja
- auto
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- odnosi się do szerokosći/wysokości obszaru maski obrazka obramowani
- Media
- visual
mask-clip
Obcięcie maski
- Wartość
[ <geometry-box> | no-clip ]- Inicjalizacja
- border-box
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-composite
Komponowanie warstw maski
- Wartość
<compositing-operator>- Inicjalizacja
- add
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-image
Źródło obrazka maski
- Wartość
<mask-reference>- Inicjalizacja
- none
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-mode
Tryb maski obrazka
- Wartość
<masking-mode>- Inicjalizacja
- match-source
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-origin
Obszar pozycjonowania
- Wartość
<geometry-box>- Inicjalizacja
- border-box
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-position
Pozysjonowanie maski obrazka
- Wartość
<position>- Inicjalizacja
- 0% 0%
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- odnosi się do powierzchni pozycjonowania maski minus rozmiar obrazka maski
- Media
- visual
mask-repeat
Powtarzanie maski obrazka
- Wartość
<repeat-style>- Inicjalizacja
- repeat
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-size
Dopasowywanie rozmiaru maski obrazka
- Wartość
<bg-size>- Inicjalizacja
- auto
- Zastosowanie
- wszystkie elementy
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
mask-type
Typ maski
- Wartość
luminance | alpha- Inicjalizacja
- luminance
- Zastosowanie
- elementy maski
- Dziedziczenie
- nie
- Procenty
- nie
- Media
- visual
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
selektor { clip: wartość } | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 7 2003-01-28 | 1 2003-06-23 |
selektor { clip: auto } | 1 2008-12-11 | 1 2004-11-09 | 79 2020-01-15 | 15 2013-07-02 | 1 2003-06-23 |
selektor { clip-path: wartość } | 55 2016-12-01 | 3.5 2009-06-30 | 79 2020-01-15 | 42 2016-12-13 | 9.1 2016-03-21 |
selektor { clip-path: border-box } | 119 2023-10-31 | 54 2017-06-13 | 119 2023-11-02 | 105 2023-11-14 | 13 2019-09-19 |
selektor { clip-rule: wartość } | ≤15 2011-10-25 | 3.5 2009-06-30 | 79 2020-01-15 | 15 2013-07-02 | ≤5 2010-06-07 |
selektor { clip-rule: evenodd } | ≤15 2011-10-25 | 3.5 2009-06-30 | 79 2020-01-15 | 15 2013-07-02 | ≤5 2010-06-07 |
selektor { clip-rule: nonzero } | ≤15 2011-10-25 | 3.5 2009-06-30 | 79 2020-01-15 | 15 2013-07-02 | ≤5 2010-06-07 |
selektor { mask: wartość } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-border: wartość } | 1 2008-12-11 | ❌ | 79 2020-01-15 | 15 2013-07-02 | 17.2 2023-12-11 |
selektor { mask-border-outset: wartość } | 1 2008-12-11 | ❌ | 79 2020-01-15 | 15 2013-07-02 | 17.2 2023-12-11 |
selektor { mask-border-repeat: wartość } | 1 2008-12-11 | ❌ | 79 2020-01-15 | 15 2013-07-02 | 17.2 2023-12-11 |
selektor { mask-border-slice: wartość } | 1 2008-12-11 | ❌ | 79 2020-01-15 | 15 2013-07-02 | 17.2 2023-12-11 |
selektor { mask-border-source: wartość } | 1 2008-12-11 | ❌ | 79 2020-01-15 | 15 2013-07-02 | 17.2 2023-12-11 |
selektor { mask-border-width: wartość } | 1 2008-12-11 | ❌ | 79 2020-01-15 | 15 2013-07-02 | 17.2 2023-12-11 |
selektor { mask-clip: wartość } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-clip: border-box } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | ❌ |
selektor { mask-clip: no-clip } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | ❌ |
selektor { mask-composite: wartość } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-composite: add } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-image: wartość } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | ❌ | 15.4 2022-03-14 |
selektor { mask-mode: wartość } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-mode: alpha } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-mode: luminance } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-mode: match-source } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-origin: wartość } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-origin: border-box } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | ❌ |
selektor { mask-position: wartość } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-repeat: wartość } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-size: wartość } | 120 2023-12-05 | 53 2017-04-19 | 120 2023-12-07 | 106 2023-12-19 | 15.4 2022-03-14 |
selektor { mask-type: wartość } | 24 2013-01-10 | 35 2015-01-13 | 79 2020-01-15 | 15 2013-07-02 | 7 2013-10-22 |
selektor { mask-type: alpha } | 24 2013-01-10 | 35 2015-01-13 | 79 2020-01-15 | 15 2013-07-02 | 7 2013-10-22 |
selektor { mask-type: luminance } | 24 2013-01-10 | 35 2015-01-13 | 79 2020-01-15 | 15 2013-07-02 | 7 2013-10-22 |