CSS clip-path egenskab
Definisjon og bruk
clip-path-egenskapen lar deg klippe elementet til en grunnform eller SVG-kilde.
Kommentar:clip-path vil erstatte den avskrevne clip-egenskapen.
CSS-syntaks
clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;
Egenskapsverdi
| Verdi | Beskrivelse |
|---|---|
| clip-source | Definer URL-en som peker til SVG <clipPath>-elementet. |
| basic-shape | Klipp elementet til grunnform: sirkel, ellipse, polygon eller stjerne. |
| margin-box | Bruk marginramme (margin box) som referansekasse. |
| border-box | Bruk kantramme (border box) som referansekasse. |
| padding-box | Bruk innvendig kantramme (padding box) som referansekasse. |
| content-box | Bruk innholdskassen (content box) som referansekasse. |
| fill-box | Bruk objektets kantramme (object bounding box) som referansekasse. |
| stroke-box | Bruk kantrammen (stroke bounding box) som referansekasse. |
| view-box | Bruk SVG visuell kanal som referansekasse. |
| none | Standardverdi. Ingen klippebaner opprettes. |
Teknisk detalj
| Standardverdi: | none |
|---|---|
| Arv: | Nei |
| Animasjonsproduksjon: | Støttet (kun basic-shape-verdi). Se også:Animasjonsrelaterte egenskaper. |
| Versjon: | CSS Masking Module Level 1 |
| JavaScript-syntaks: | object.style.clipPath="circle(50%)" |
Nettleserstøtte
Tallene i tabellen angiver den første nettleserversjonen som fullt ut støtter egenskapen.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 55.0 23.0 -webkit- |
79.0* | 54.0 | 9.1 6.1 -webkit- |
42.0 15.0 -webkit- |
Edge kun understøtter clip-path på SVG-elementer (ikke HTML-elementer).
