CSS clipping 属性用于为元素创建剪裁区域，该剪裁区域定义了元素的可见区域。
clip 属性仅适用于具有绝对位置或固定位置的元素。本章讨论如何使用 clip 属性。
尽管某些浏览器可能仍支持它，但此属性在现代 Web 开发中很少使用。它被认为是过时的和非标准的。相反，开发人员通常使用clip-path 属性，该属性提供了更大的灵活性和对剪辑的控制。
以下是可用于 clip 属性的所有可能值：
- 默认情况下，该元素是可见的。
- <shape> - clip 属性的 rect（top， right， bottom， left） 值定义了一个矩形剪裁区域。顶部和底部值是指距上边框的距离，而右侧和左侧值是指距左侧边框的距离。
适用于
只有绝对定位的元素。
语法
clip = <rect()> | auto;
CSS clip - 自动值
CSS clip：auto 属性不会裁剪元素，因此整个元素是可见的。此属性适用于具有 position：absolute 或 position：fixed 属性的元素。这是默认值。
<html>
<head>
<style>
.clip-auto {
position: absolute;
width: 200px;
background-color: #3be028;
padding: 10px;
clip: auto;
}
</style>
</head>
<body>
<div class="clip-auto">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>
以下示例演示了图像不会被裁剪，并且在其边界内将完全可见 -
<html>
<head>
<style>
.clip-auto-img {
position: absolute;
width: 150px;
padding: 10px;
clip: auto;
}
</style>
</head>
<body>
<img src="images/tree.jpg" class="clip-auto-img"/>
</body>
</html>
CSS clip - rect（） 值
您可以设置 clip： rect（top， right， bottom， left） 属性来指定元素的矩形剪裁区域。top、right、bottom 和 left 值可以是长度或自动值。如果设置为 auto，则元素将剪裁到相应的边框边缘。
<html>
<head>
<style>
.clip-rect {
position: absolute;
width: 200px;
background-color: #3be028;
padding: 10px;
clip: rect(0px, 100px, 150px, 0px);
}
</style>
</head>
<body>
<div class="clip-rect">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>
以下示例演示了如何使用 rect（） 值裁剪图像并使其在屏幕的左上角可见 -
<html>
<head>
<style>
.clip-rect-img {
position: absolute;
width: 150px;
padding: 10px;
clip: rect(0px, 200px, 160px, 0px);
}
</style>
</head>
<body>
<img src="images/tree.jpg" class="clip-rect-img"/>
</body>
</html>
CSS Clip - 相关属性
| 属性 | 描述 |
|---|---|
| clip-path | （推荐）使用各种形状和路径定义剪切区域。 |
