Thuộc tính clip property xác định phần nào của một phần tử absolute bạn muốn hiển thị. Phần còn lại sẽ bị ẩn đi, ngoại trừ phần bạn chỉ định. Thuộc tính clip chỉ áp dụng cho phần tử absolute. Tức là phần tử có position: absolute hoặc position: fixed.
Cú pháp:
clip: auto|shape|initial|inherit;
Lưu ý:
- Thuộc tính CSS clip sẽ không hoạt động với "overflow: visible".
- Thuộc tính clip hiện đang bị loại bỏ. Nó sẽ được thay thế bằng thuộc tính clip-path.
Giá trị thuộc tính: Tất cả các thuộc tính được mô tả chi tiết kèm ví dụ bên dưới.
auto: Đây là giá trị mặc định, sẽ không có bất kỳ thao tác cắt xén nào. Phần tử được hiển thị nguyên trạng.
Cú pháp:
clip: auto;
Ví dụ: Ví dụ này minh họa việc sử dụng clip property với giá trị auto. Nó sẽ không áp dụng bất kỳ thao tác cắt xén nào cho vùng được chỉ định.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | clip Property </title>
<style>
.shape {
position: absolute;
background: #0F9D58;
width: 200px;
height: 200px;
color: #ffffff;
text-align: center;
}
#clip_property {
clip: auto;
}
</style>
</head>
<body>
<p class="shape" id="clip_property"> GeeksforGeeks </p>
</body>
</html>
Đầu ra:
shape: shape cắt phần được xác định của phần tử. `rect(top, right, bottom, left)` dùng để xác định phần hiển thị.
Cú pháp:
clip: rect(top, right, bottom, left);
Ví dụ: Ví dụ này minh họa việc sử dụng clip property. Giá trị được đặt thành shape cụ thể để cắt phần chỉ định của phần tử.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | clip Property </title>
<style>
.shape {
position: absolute;
background: #0F9D58;
width: 200px;
height: 200px;
color: #ffffff;
text-align: center;
}
#clip_property {
clip: rect(0px, 120px, 100px, 0px);
}
</style>
</head>
<body>
<p class="shape" id="clip_property"> GeeksforGeeks </p>
</body>
</html>
Đầu ra:
initial: initial đặt giá trị mặc định, tức là sẽ không có cắt xén nào. Giá trị mặc định là auto.
Cú pháp:
clip: initial;
Ví dụ: Ví dụ này minh họa việc sử dụng clip property. Giá trị được đặt thành initial.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | clip Property </title>
<style>
.shape {
position: absolute;
background: #0F9D58;
width: 200px;
height: 200px;
color: #ffffff;
text-align: center;
}
#clip_property {
clip: initial;
}
</style>
</head>
<body>
<p class="shape" id="clip_property"> GeeksforGeeks </p>
</body>
</html>
Đầu ra:
inherit: inherit nhận thuộc tính từ phần tử cha. Khi nó được sử dụng với phần tử gốc, thuộc tính initial sẽ được dùng.
Cú pháp:
clip: inherit;
Ví dụ: Ví dụ này minh họa việc sử dụng clip property. Giá trị được đặt thành inherit.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | clip Property </title>
<style>
.shape {
position: absolute;
background: #0F9D58;
width: 200px;
height: 200px;
color: #ffffff;
text-align: center;
}
.shape1 {
border: solid;
border-color: black;
position: absolute;
background: #ffffff;
width: 200px;
height: 200px;
color: #0F9D58;
text-align: center;
}
#clip_property {
clip: rect(0px, 120px, 100px, 0px);
}
#clip_property1 {
clip: inherit;
}
</style>
</head>
<body>
<div class="shape" id="clip_property">
<p> GeeksforGeeks </p>
<div class="shape1" id="clip_property1">
<p> GeeksGeeks </p>
</div>
</div>
<!-- Here clip_property1 inherits the
clip property from clip_property -->
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ clip property được liệt kê dưới đây:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 7.0
- Safari 1.0