CSS clip property
Examples
Crop an image:
img
{
position: absolute;
clip: rect (0px, 60px, 200px, 0px);
}
{
position: absolute;
clip: rect (0px, 60px, 200px, 0px);
}
Attribute definitions and instructions
If the image is larger than the elements it contains, what will happen? -clip attribute allows you to specify an absolute positioning of elements, the size should be visible, the element is cut into this shape, and displayed.
Note :: If prior "overflow: visible", clip property does not work.
| Defaults: | auto |
|---|---|
| inherit: | no |
| version: | CSS2 |
| JavaScript syntax: | object .style.clip = "rect (0px,50px, 50px, 0px)" |
Browser Support
Figures in the table represent the first browser to support the version number of the property.
| 属性 | |||||
|---|---|---|---|---|---|
| clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
Property Value
| 值 | 描述 |
|---|---|
| shape | 设置元素的形状。唯一合法的形状值是：rect (top,right,bottom,left) |
| auto | 默认值。不应用任何剪裁。 |
| inherit | 规定应该从父元素继承 clip 属性的值。 |
related articles
CSS tutorial: CSS Positioning
