1. 首页
  2. CSS 菜鸟教程
  3. CSS - Clip （Obsolete） 属性

CSS - Clip （Obsolete） 属性

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 （推荐）使用各种形状和路径定义剪切区域。
<< CSS - 计数器 CSS - writing-mode （写作模式）属性 >>