clip
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Warning:
Khuyến khích tác giả sử dụng thuộc tính clip-path thay thế.
Thuộc tính clip CSS xác định phần hiển thị của một phần tử. Thuộc tính clip chỉ áp dụng cho các phần tử được định vị tuyệt đối — tức là các phần tử có position:absolute hoặc position:fixed.
Cú pháp
/* Giá trị từ khóa */
clip: auto;
/* Giá trị <shape> */
clip: rect(1px, 10em, 3rem, 2ch);
/* Giá trị toàn cục */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;
Giá trị
rect()-
Một hình chữ nhật được xác định bằng hàm
rect()có dạngrect(<top>, <right>, <bottom>, <left>). Các giá trị<top>và<bottom>là độ lệch tính từ cạnh viền bên trong phía trên của hộp, trong khi<right>và<left>là độ lệch tính từ cạnh viền bên trong phía trái của hộp — tức là phạm vi của hộp padding.Các giá trị
<top>,<right>,<bottom>và<left>có thể là<length>hoặcauto. Nếu giá trị của bất kỳ cạnh nào làauto, phần tử sẽ bị cắt theo cạnh viền bên trong của cạnh đó.
Note:
Hàm rect() <shape> được dùng trong thuộc tính clip đã lỗi thời khác với hàm CSS rect() dùng để định nghĩa <basic-shape>.
auto-
Phần tử không bị cắt (mặc định). Điều này khác với
rect(auto, auto, auto, auto), vốn cắt theo các cạnh viền bên trong của phần tử.
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | absolutely positioned elements |
| Inherited | no |
| Computed value | auto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwise |
| Animation type | a rectangle |
Cú pháp hình thức
clip =
<rect()> |
auto
<rect()> =
rect( <top> , <right> , <bottom> , <left> )
Ví dụ
Cắt một hình ảnh
<p class="dotted-border">
<img src="macarons.png" alt="Original graphic" />
<img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
<img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
<img
id="bottom-right"
src="macarons.png"
alt="Graphic clipped to bottom right" />
</p>
.dotted-border {
border: dotted;
position: relative;
width: 390px;
height: 400px;
}
#top-left,
#middle,
#bottom-right {
position: absolute;
top: 0;
}
#top-left {
left: 400px;
clip: rect(0, 130px, 90px, 0);
}
#middle {
left: 270px;
clip: rect(100px, 260px, 190px, 130px);
}
#bottom-right {
left: 140px;
clip: rect(200px, 390px, 290px, 260px);
}
Đặc tả
| Specification |
|---|
| CSS Masking Module Level 1 # clip-property |