Clip-Path Inset trong CSS không hoạt động trong chrome

Question

Tôi đang cố gắng sử dụng thuộc tính CSS clip-path nhưng tôi gặp lỗi Invalid property value trong Chrome.

Dưới đây là một bản demo nhỏ:

.clip-me { 
 
    clip-path: inset(0px 50px 50px 0px); /* top, right, bottom, left */ 
 
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Note: Đây là khác biệt so với câu hỏi này trên clip-path does not work with chrome, bởi vì nó cụ thể đồng minh hỏi về cách áp dụng đường dẫn clip bằng cách sử dụng SVG (không phải CSS)

Theo tôi có thể sử dụng, nó should work in chrome.

Answer 1

Hóa ra tôi chỉ cần tiền tố -webkit- (mặc dù tôi không nhìn thấy nó trong danh sách này của vendor prefixes)

.clip-me {   /* top, right, bottom, left */ 
 
    -webkit-clip-path: inset(0px 50px 50px 0px); 
 
      clip-path: inset(0px 50px 50px 0px); 
 
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Cập nhật lúc Chrome 55, clip -truy cập mà không có tiền tố của nhà cung cấp hiện được hỗ trợ, nhưng nhiều trình duyệt khác vẫn yêu cầu sử dụng -webkit-clip-path để an toàn hơn bao gồm nó ngay bây giờ.

Dưới đây là một bản chụp của CanIUse (tính đến 2017), với các chi tiết thêm ở góc trên bên phải của trình duyệt hỗ trợ một phần thường cho thấy sự cần thiết của các -webkit- tiền tố

Đọc thêm:

• Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
• Using clip-path