CSS clip-path ominaisuus

Määrittely ja käyttö

clip-path-ominaisuus mahdollistaa elementin leikkaamisen perusmuodoksi tai SVG-lähteeksi.

Huomautus:clip-path korvaa poistetun clip-ominaisuuden.

Esimerkki

Leikkaa kuva 50 %:n ympyräksi:

img {
  clip-path: circle(50%);
}

Kokeile itse

CSS-kieli

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

Ominaisuuden arvo

Arvo Kuvaus
clip-source Määritä osoite SVG <clipPath>-elementille.
basic-shape Leikkaa elementti perusmuodoksi: ympyrä, ellipsi, monikulmio tai tähti.
margin-box Käytä marginaalikehyksenä viittauskehyksenä.
border-box Käytä reunan kehyksenä viittauskehyksenä.
padding-box Käytä sisennyksen kehyksenä viittauskehyksenä.
content-box Käytä sisällön kehyksenä viittauskehyksenä.
fill-box Käytä objektin reunakehyksenä viittauskehyksenä.
stroke-box Käytä varjolinjan reunakehyksenä viittauskehyksenä.
view-box Käytä SVG-viewporttia viittauskehyksenä.
none Oletusarvo. Ei luoda leikkausreittiä.

Tekninen yksityiskohta

Oletusarvo: none
Perintä: Ei
Animaation tekeminen: Tuki (vain basic-shape-arvo). Katso myös:Animaatioon liittyvät ominaisuudet.
Versio: CSS Masking Module Level 1
JavaScript-kieli: object.style.clipPath="circle(50%)"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tämän ominaisuuden täydellisesti.

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 vain SVG-elementillä (ei tue HTML-elementtejä) tukee clip-path.