CSS clip-pad eigenschap
Definitie en gebruik
De clip-path-eigenschap maakt het mogelijk om elementen af te snijden tot basisvormen of SVG-bron.
Opmerking:clip-path zal het废弃de clip-eigenschap vervangen.
Voorbeeld
Snijd het beeld af tot 50% van een cirkel:
img {
clip-path: circle(50%);
}
CSS-syntaxis
clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;
Eigenschapswaarde
| Waarde | Beschrijving |
|---|---|
| clip-source | Definieer de URL die verwijst naar het SVG <clipPath>-element. |
| basic-shape | Snijd elementen af tot basisvormen: cirkel, ovaal, veelhoek of ster. |
| margin-box | Gebruik de margebalk (margin box) als referentiekader. |
| border-box | Gebruik de randbalk (border box) als referentiekader. |
| padding-box | Gebruik de paddingbalk (padding box) als referentiekader. |
| content-box | Gebruik de inhoudsbalk (content box) als referentiekader. |
| fill-box | Gebruik de objectrandbalk (object bounding box) als referentiekader. |
| stroke-box | Gebruik de penrandbalk (stroke bounding box) als referentiekader. |
| view-box | Gebruik de SVG viewport als referentiekader. |
| none | Standaardwaarde. Geen snijpad gecreëerd. |
Technische details
| Standaardwaarde: | none |
|---|---|
| Inherits: | Nee |
| Animatieproductie: | Ondersteund (alleen voor de waarde basic-shape). Raadpleeg:Animatiegerelateerde eigenschappen. |
| Versie: | CSS Masking Module Level 1 |
| JavaScript-syntaxis: | object.style.clipPath="circle(50%)" |
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.
| 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 ondersteunt clip-path alleen op SVG-elementen (ondersteunt geen HTML-elementen).
