Thuộc tính clip CSS

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

Thuộc tính clip cắt phần tử định vị tuyệt đối.

Khi kích thước của một hình ảnh lớn hơn phần tử chứa nó thì sao? Thuộc tính "clip" cho phép bạn quy định kích thước hiển thị của một phần tử, phần tử này sẽ bị cắt và hiển thị dưới hình dạng này.

Giải thích

Thuộc tính này được sử dụng để xác định một hình vuông cắt. Đối với phần tử được định vị tuyệt đối, nội dung trong hình vuông này mới hiển thị được. Nội dung ngoài khu vực cắt này sẽ được xử lý dựa trên giá trị của overflow. Khu vực cắt có thể lớn hơn hoặc nhỏ hơn khu vực nội dung của phần tử.

Xem thêm:

Giáo trình CSS:Định vị CSS

Hướng dẫn tham khảo HTML DOM:Thuộc tính clip

Ví dụ

Cắt hình ảnh:

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

Thử ngay

Ngữ pháp CSS

clip: auto|shape|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
shape Thiết lập hình dạng của phần tử. Giá trị hình dạng hợp lệ duy nhất là: rect (top, right, bottom, left)
auto Giá trị mặc định. Không áp dụng bất kỳ việc cắt bỏ nào.
inherit Định nghĩa rằng giá trị của thuộc tính clip nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: auto
Kế thừa: no
Phiên bản: CSS2
Ngữ pháp JavaScript: object.style.clip="rect(0px,50px,50px,0px)"

Các ví dụ khác

Thiết lập hình dạng của phần tử
Ví dụ này minh họa cách thiết lập hình dạng của một phần tử. Phần tử này được cắt theo hình dạng và sau đó hiển thị.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra 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
1.0 8.0 1.0 1.0 7.0