CSS clip-path egenskap

Definition och användning

clip-path-egenskapen låter dig klippa elementet till grundform eller SVG-källa.

Kommentar:clip-path kommer att ersätta den avskrivna clip-egenskapen.

Exempel

Klippa bilden till 50% cirkel:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
clip-source Definiera URL som pekar på SVG <clipPath>-elementet.
basic-shape Klippa elementet till grundform: cirkel, ellips, polygon eller stjärna.
margin-box Använd marginalram (margin box) som referensram.
border-box Använd kantram (border box) som referensram.
padding-box Använd paddingram (padding box) som referensram.
content-box Använd innehållsram (content box) som referensram.
fill-box Använd objektgränsram (object bounding box) som referensram.
stroke-box Använd kantgränsram (stroke bounding box) som referensram.
view-box Använd SVG-viewport som referensram.
none Standardvärde. Skapar ingen klippning av väggen.

Tekniska detaljer

Standardvärde: none
Arv: Nej
Animeringsproduktion: Stöd (endast basic-shape-värde). Se till:Animeringsrelaterade egenskaper.
Version: CSS Masking Module Level 1
JavaScript-syntax: object.style.clipPath="circle(50%)"

Webbläsarstöd

Tabellen anger den första webbläsarversion som fullständigt stöder 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 endast stödjer clip-path på SVG-element (stödjer inte HTML-element).