Thuộc tính clip-path CSS

Định nghĩa và cách sử dụng

Thuộc tính clip-path cho phép bạn cắt phần tử thành hình dạng cơ bản hoặc nguồn SVG.

Chú ý:clip-path sẽ thay thế thuộc tính clip đã bỏ rơi.

Mô hình

Cắt hình ảnh thành hình tròn 50%:

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

Thử ngay

Ngữ pháp CSS

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

Giá trị thuộc tính

Giá trị Mô tả
clip-source Định nghĩa URL chỉ đến phần tử SVG <clipPath>.
basic-shape Cắt phần tử thành hình dạng cơ bản: tròn, elip, đa giác hoặc ngôi sao.
margin-box Sử dụng khung biên (margin box) làm khung tham chiếu.
border-box Sử dụng khung viền (border box) làm khung tham chiếu.
padding-box Sử dụng khung lấp đầy (padding box) làm khung tham chiếu.
content-box Sử dụng khung nội dung (content box) làm khung tham chiếu.
fill-box Sử dụng khung giới hạn của đối tượng (object bounding box) làm khung tham chiếu.
stroke-box Sử dụng khung giới hạn của bút (stroke bounding box) làm khung tham chiếu.
view-box Sử dụng viewport SVG làm khung tham chiếu.
none Giá trị mặc định. Không tạo剪切路径.

Chi tiết kỹ thuật

Giá trị mặc định: none
Kế thừa: Không
Chế tạo animation: Hỗ trợ (chỉ áp dụng cho giá trị basic-shape). Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: Module Masking CSS Level 1
Ngữ pháp JavaScript: object.style.clipPath="circle(50%)"

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

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 chỉ hỗ trợ clip-path trên các phần tử SVG (không hỗ trợ các phần tử HTML).