English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Clip an element. The only valid shape value is: rect(top, right, bottom, left). In this case, top and bottom specify the offset from the top edge of the box, while right and left specify the offset from the left edge of the box. Top, right, bottom, and left can have length values or auto. Negative lengths are allowed.
The clip CSS attribute defines the clipping area for elements with absolute positioning. However, if the attribute is set to visible, it will not take effect.overflowIf the attribute is set to visible, it will not take effect.
The following table explains the usage and version history of this attribute, as well as the usage syntax of this attribute in JavaScript scripts.
| Default value: | auto |
|---|---|
| Applies to: | Elements with absolute positioning |
| Inheritance: | No |
| Animatable: | Yes.View animation properties. |
| Version: | CSS 2,3 |
| JavaScript syntax: | object.style.clip="rect(0px,50px,50px,0px) |
Warning:Do not use this attribute because since CSS3 The attribute has been deprecated and removed from future versions. Although some browsers may still support it.
The syntax of this attribute is as follows:
clip: shape | auto | initial | inherit
The following examples demonstrate how to use the clip attribute.
img {
position: absolute;
clip: rect(0px,50px,200px,10px);
}Test and see‹/›The following table describes the value of this attribute.
| Value | Description |
|---|---|
| shape | Clip an element. The only valid shape value is rect(top, right, bottom, left). In which, the top and bottom specify the offset from the top edge of the box, while the right and left specify the offset from the left edge of the box. top, right, bottom, and left can have length values or auto. Negative lengths are allowed. |
| auto | The element is not clipped. This is the default value. |
| initial | Set this attribute to its default value. |
| inherit | If specified, the associated elements adopt the clip attribute value of their parent element. |
Browser compatibility of clip attribute, the numbers in the following table indicate the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.
|
Please refer to the following tutorials:CSS position,CSS overflow,CSS display.
Related properties:position,display,overflow,overflow-x,overflow-y.