CSS clip-path 属性

การกำหนดและการใช้งาน

คุณสมบัติ clip-path ทำให้คุณสามารถตัดอิเลเมนต์เป็นรูปทรงพื้นที่พื้นฐานหรือ SVG แหล่งข้อมูล。

หมายเหตุ:clip-path จะทดแทนคุณสมบัติ clip ที่ถูกทำให้ลดระดับการใช้งาน。

ตัวอย่าง

ตัดรูปภาพเป็นวงกลม 50%:

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

ลองด้วยตัวเอง

CSS ภาษา

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

ค่าทางด้านของอุปัญญาย

ค่า รายละเอียด
clip-source กำหนด URL ที่มีอยู่ของ clipPath SVG <clipPath> อิเลเมนต์。
basic-shape ตัดเอาส่วนของอิเลเมนต์เป็นรูปทรงพื้นที่พื้นฐาน: รูปวงกลม, รูปไอซ์กลม, รูปทรงหลายเหลี่ยม หรือ รูปดาว。
margin-box ใช้ margin box ในฐานะกล่องอ้างอิง。
border-box ใช้ border box ในฐานะกล่องอ้างอิง。
padding-box ใช้ padding box ในฐานะกล่องอ้างอิง。
content-box ใช้ content box ในฐานะกล่องอ้างอิง。
fill-box ใช้ boundary box ของส่วนที่เติมเนื้อหา (object bounding box) ในฐานะกล่องอ้างอิง。
stroke-box ใช้ boundary box ของบริเวณสีที่เขียน (stroke bounding box) ในฐานะกล่องอ้างอิง。
view-box ใช้ viewport SVG ในฐานะกล่องอ้างอิง。
none ค่าเริ่มต้น。ไม่ทำการสร้างเส้นทางตัดความยาว。

รายละเอียดเทคนิค

ค่าเริ่มต้น: none
การสืบทอด: ไม่
การสร้างแอนิเมชัน: สนับสนุน (เฉพาะค่า basic-shape เท่านั้น)。ดูเพิ่มเติมที่:คุณสมบัติที่เกี่ยวกับอนุญาต.
เวอร์ชั่น: CSS Masking Module Level 1
JavaScript ภาษา: 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 ละครเรียกเรื่องเดียวเท่านั้น SVG อิเลเมนต์ (ไม่สนับสนุน HTML อิเลเมนต์) ที่สนับสนุน clip-path。