css的clip属性用于定义元素的可见区域，超出设定区域的内容会被裁剪隐藏，该属性仅适用于position属性值为absolute或fixed的元素，对静态定位或相对定位的元素无效。
clip属性的基本语法
clip属性的语法格式为clip: rect(top, right, bottom, left)，其中rect是固定关键字，四个参数分别代表裁剪区域的上、右、下、左四个边界相对于元素左上角的偏移量，单位可以是px、em等长度单位，也可以使用auto表示不裁剪对应边界。
需要注意四个参数的顺序和margin、padding等属性的顺序不同，不要混淆。当四个参数都设置为auto时，元素不会被裁剪，等同于不设置clip属性。
clip属性的使用示例
基础裁剪示例
下面通过一个简单的示例展示如何使用clip属性裁剪一个div元素的部分区域：
/* 定义基础元素样式 */
.box {
width: 200px;
height: 200px;
background-color: #4CAF50;
position: absolute; /* clip属性生效的必要条件 */
top: 50px;
left: 50px;
/* 裁剪区域：上边界距元素顶部20px，右边界距元素左侧180px，下边界距元素顶部180px，左边界距元素左侧20px */
clip: rect(20px, 180px, 180px, 20px);
}
上述代码会将200*200的绿色div元素裁剪为中间的160*160的方形区域，四周各20px的区域会被隐藏。
实现元素视觉隐藏
clip属性也常用于实现元素的视觉隐藏，同时保留元素的可访问性，比直接设置display:none更符合无障碍访问要求：
/* 视觉隐藏但保留可访问性的样式 */
.visually-hidden {
position: absolute;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
}
上述样式会将元素裁剪为0尺寸的区域，视觉上不可见，但屏幕阅读器仍然可以读取元素内容。
clip属性的注意事项
- clip属性仅对绝对定位或固定定位的元素生效，如果元素设置了position: relative或position: static，clip属性不会起作用。
- clip属性已经被css规范标记为废弃属性，虽然目前主流浏览器仍然支持，但不建议在新项目中使用，更推荐使用
clip-path属性实现裁剪效果。 - rect的四个参数如果设置为负值，裁剪区域会超出元素本身的边界，此时超出元素本身的部分不会被显示，因为元素本身没有对应内容。
- clip属性不支持百分比单位，所有参数必须使用明确的长度单位或者auto，这一点和很多其他css属性不同。
clip与clip-path的对比
clip-path是clip属性的现代替代方案，支持更多的裁剪形状，兼容性也更好，两者的核心差异如下：
| 对比项 | clip属性 | clip-path属性 |
|---|---|---|
| 适用定位 | 仅absolute、fixed | 所有定位类型 |
| 裁剪形状 | 仅支持矩形 | 支持矩形、圆形、椭圆、多边形等 |
| 规范状态 | 已废弃 | 现行规范 |
| 百分比支持 | 不支持 | 支持 |
如果项目不需要兼容非常老的浏览器，建议优先使用clip-path属性实现元素裁剪需求。