Đường dẫn clip - Thủ thuật CSS

Mục lục

Các clip-pathbất động sản trong CSS cho phép bạn chỉ định một khu vực cụ thể của một phần tử để hiển thị, với phần còn lại bị ẩn (hoặc “cắt bớt”) đi.

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Đã từng có một thuộc cliptính, nhưng lưu ý rằng nó không được dùng nữa.

Trường hợp sử dụng phổ biến nhất sẽ là một hình ảnh, nhưng nó không giới hạn ở đó. Bạn có thể dễ dàng áp dụng clip-pathcho thẻ đoạn văn và chỉ một phần văn bản.

 

 I'll be clipped.

Bốn giá trị đó trong inset()(trong CSS ở trên) đại diện cho điểm trên cùng / bên trái và điểm dưới cùng / bên phải , tạo thành hình chữ nhật có thể nhìn thấy được. Mọi thứ bên ngoài hình chữ nhật đó đều bị ẩn.

Hình ảnh này của Louis Lazaris giải thích rất tốt bốn điểm của cú pháp cũclip: rect(); .

Các giá trị có thể có khác:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Đường dẫn clip SVG mẫu:

Thật kỳ lạ khi clip-pathkhông hỗ trợ path()chức năng out of gate, vì path()nó đã là một thứ cho các thuộc tính như thế motion-path. Firefox hiện đã hỗ trợ cho nó và chúng tôi đang chờ các trình duyệt còn lại. Xem phần Triển khai ban đầu của clip-path: path ();

Tạo của riêng bạn

Cho đến khi chúng ta có thể sử dụng một cách đáng tin cậy path(), thì các clip hữu ích nhất cho các hình dạng tùy chỉnh lạ mắt là polygon(). Đây là một trình soạn thảo thực sự gọn gàng cho những người từ Mads Stoumann (cũng hoạt động cho hình tròn và hình elip):

Thêm thông tin

  • Cắt và tạo mặt nạ trong CSS
  • clip-path trên WPD
  • đường dẫn clip trên MDN
  • Clippy: Nhà sản xuất clip-path của Bennett Feely
  • Cắt và tạo mặt nạ trên MDN
  • Thuộc tính CSS Clip (không dùng nữa) (Trang web ấn tượng)
  • Thông số kỹ thuật về CSS Masking
  • CSS Masking của Dirk Schulze
  • Cắt trong CSS và SVG - Thuộc tính và yếu tố đường dẫn clip của Sara Soueidan
  • Bút được gắn thẻ clip-path trên CodePen
  • Bản trình diễn và trình duyệt hỗ trợ trình duyệt Pen của Yoksel
  • SVG Masks của Jakob Jenkov
  • Nghiên cứu của Alan Greenblatt về các mức hỗ trợ của trình duyệt cho các tính năng cắt và tạo mặt nạ

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
91 54 Không 88 TP *

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *

thú vị bài viết...