Reference: https://baijiahao.baidu.com/s?id=1757136902803734131&wfr=spider&for=pc

effect:

The clip attribute is used to set the shape of the element and is used to clip absolutely positioned elements. When an image is larger than its containing element, the clip attribute allows specifying the visible size of an element so that the element will be clipped and displayed within the element.

Value:

The clip attribute has three values:
① auto default
② inherit inherits from the parent
③ rect(top, right, bottom, left) rectangular shape (I have only seen rectangles so far)

detail:

The clip attribute can only be used for absolutely positioned elements, that is, for the clip to take effect, you need to set position: absolute or fixed first

Example:

<!DOCTYPE html>
<html>
<head>
<style>
    img {
      position: absolute;
      clip: rect(0px,60px,200px,0px);
    }
</style>
</head>
<body>

    <img src="/i/logo/w3logo-1.png" width="188" height="267">

</body>
</html>

The running effect is as follows:

Code explanation:

clip: rect( top , right , bottom , left) ; What do these four parameters mean? These four parameters make people look quite confused, and the explanation on Baidu Encyclopedia is also wrong. To explain the meaning of these four parameters, see the figure below for details

The simple understanding is that the height of the picture is the bottom, and the width is the right. Of course, the picture will not be negative. In addition, the clip attribute can be used for most browsers, and the writing method will be a little different. For example:

.my-element {
    position: absolute;
    clip: rect(10px 350px 170px 0);    /* IE4 to IE7 */
    clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}

Summarize:

rect(top, right, bottom, left) means that you want to draw a rectangular area for display, and the four values represent the distance between the four edges you want to draw and the original edge: ①
        top , the distance from the "top edge" is the shortest The distance from the top
        ② right , the distance from the "right line" to the leftmost
        ③ bottom , the distance from the "bottom line" to the top
        ④ left , the distance from the "left line" to the leftmost

The clip property in CSS