The clip attribute is a relatively useful attribute, but it is often rare in practical applications, and 52CSS.com introduces very few of it. Two points to note when applying the clip attribute:
1. The clip attribute must be used together with the positioning attribute postion to take effect.
2. The calculation coordinates of clip cropping are calculated starting from the upper left corner, that is, the (0,0) point, as shown in Figure 3. This is unlike padding and margin. The right margin and bottom margin of both of them are from the rightmost point. and counting from the bottom.
Basic syntax of clip attribute: 
Example Source Code
[www.downcodes.com] clip : auto | rect ( number number number number )
Value:
auto: default value. No clipping of objects
rect (number number number number): Provides four offset values calculated from the upper left corner of the object for the (0,0) coordinate in the order of top-right-bottom-left. Any of these values can be replaced with auto, that is, this side Don't cut
Retrieves or sets the visible area of an object. Parts outside the viewing area are transparent.
This property defines the size of the visible area of an absolutely positioned object. The value of the position property must be set to absolute in order for this property to be used.
This property is available on MAC platforms starting with IE5.
The corresponding script property is clip .
In addition to making colored text, the clip attribute in CSS can also effectively crop elements in other web pages.
The clip attribute sets the shape of the element. This property is used to define a clipping rectangle. Only the content within this rectangle is visible, and the content outside this clipping area has the same effect as overflow:hidden. The clipping area may be larger or smaller than the element's content area.
clip attribute value: auto | rect (top, right, bottom, left)
Auto means no cropping. The four directions in rect should be filled with numerical values, indicating the position of cropping.
Below I will give a simple example of cropping an image.
First prepare a picture, as shown in Figure 1, its size is 159px*99 pixels. I plan to use the clip attribute to crop the image so that only the big red dot in the image is displayed.
I first create a div frame to place the image. Its CSS is defined as follows:
Example Source Code
[www.downcodes.com] #imgClip {
position:relative;
width:159px;
height:99px;
background:#FFF985;
margin:0 auto;
}
The positioning attribute of this div is set to relative positioning in order to use it as the positioning standard for the image. The background is defined as #FFF985 in order to make the display effect more obvious.
Then define the cropping properties of the image. The CSS definition is as follows:
Example Source Code
[www.downcodes.com] #imgClip img {
position:absolute;
clip:rect(21px 68px 51px 38px);
}
The absolute positioning here is relative to the div with the id of imgClip. The values in the clip are arranged in the order of top, right, bottom, and left.
html code:
Example Source Code
[www.downcodes.com] <div id="imgClip">
<img src="" width="159" height="99" />
</div>
