语法
clip: auto | shape | initial | inherit;
clip属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: auto;
}
</style>
</head>
<body>
<img src="/onitroad-logo.png" alt="onitroad.com">
</body>
</html>
具有“rect”值的裁剪属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: rect(0px, 70px, 200px, 0px);
}
</style>
</head>
<body>
<img src="/onitroad-logo.png" alt="onitroad.com logo">
</body>
</html>
CSS clip 属性值说明
| 值 | 说明 |
|---|---|
| auto | 不剪裁元素。这是默认值。 |
| shape | 裁剪元素。唯一有效的值是：rect（top，right，bottom，left）。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父元素继承属性。 |
clip 属性允许一个矩形裁剪一个定位的元素。
矩形被指定为四个坐标：上、右、下、左。
top 和bottom 的值指定从框的内部上边界边缘的偏移量，而right 和left 的值指定从框的内部左边界边缘的偏移量。
所有四个边都可以是长度或者自动。
“auto”是默认值。
如果将溢出属性的值设置为可见，则clip属性不起作用。
如果需要，可以使用较新的 clip-path属性来代替，因为clip属性已被弃用。
| 初始值 | auto |
|---|---|
| 应用于 | “Absolutely”绝对定位元素。 |
| 继承 | 无效 |
| 可动画的 | 背景色可设置动画。 |
| 版本 | CSS2 |
| DOM 语法 | object.style.clip = "rect(10px,40px,40px,10px)"; |
日期：2020-06-02 22:14:21 来源：oir作者：oir