CSS รูปแบบ clip-path

  • หน้าก่อน clip
  • หน้าต่อไป color

Definition and usage

The clip-path property allows you to clip an element to a basic shape or SVG source.

Note:clip-path will replace the deprecated clip property.

Example

Clip the image to 50% of a circle:

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

Try it yourself

CSS Syntax

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

Attribute value

Value Description
clip-source Define the URL pointing to the SVG <clipPath> element.
basic-shape Clip the element to a basic shape: circle, ellipse, polygon, or star.
margin-box Use margin box as the reference box.
border-box Use border box as the reference box.
padding-box Use padding box as the reference box.
content-box Use content box as the reference box.
fill-box Use object bounding box (object bounding box) as the reference box.
stroke-box Use stroke bounding box (stroke bounding box) as the reference box.
view-box Use SVG viewport as the reference box.
none Default value. No clipping path is created.

Technical details

Default value: none
Inheritance: No
Animation creation: Supported (only for basic-shape value). See also:Properties related to animation.
Version: CSS Masking Module Level 1
JavaScript Syntax: object.style.clipPath="circle(50%)"

การสนับสนุนของเวอร์ชั่นบราวเซอร์

ตัวเลขในตารางระบุสูตรรหัสของเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

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 สนับสนุน clip-path บนสิ่งของ SVG ได้เท่านั้น (ไม่สนับสนุนสิ่งของ HTML)

  • หน้าก่อน clip
  • หน้าต่อไป color