CSS 属性

CSS clip 属性用于为元素创建剪切区域，该区域定义元素的可见区域。

剪切属性仅适用于具有绝对或固定定位的元素。本章讨论如何使用 Clip 属性。

尽管某些浏览器可能仍然支持它，但该属性在现代 Web 开发中很少使用。它被认为是过时的和非标准的。相反，开发人员通常使用 clip-path 属性，它提供了更大的灵活性和对剪辑的控制。

以下是所有可以使用的可能值对于剪辑属性:

  • auto: 元素默认可见。

  • <shape>: rect(top, right, bottom, left）剪辑属性的值定义了一个矩形剪辑区域。顶部和底部值是指距上边框的距离，而右值和左值是指距左边框的距离。

适用范围

仅绝对定位的元素。

语法

clip = <rect()> | auto;

CSS clip: auto

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">
      天气凉了，树叶黄了，一片片叶子从树上落下来。天空那么蓝，那么高。一群大雁往南飞，一会排成个“人”字，一会排成个“一”字。啊！秋天来了！
   </div>
</body>
</html>

以下示例演示图像不会被裁剪，并且在其边界内将完全可见 -

<html>
<head>
<style>
   .clip-auto-img {
      position: absolute;
      width: 150px;
      padding: 10px;
      clip: auto; 
   }
</style>
</head>
<body>
   <img src="/css/images/tree.jpg" class="clip-auto-img"/>
</body>
</html>

CSS clip: rect() 

你可以设置clip: rect(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">
      天气凉了，树叶黄了，一片片叶子从树上落下来。天空那么蓝，那么高。一群大雁往南飞，一会排成个“人”字，一会排成个“一”字。啊！秋天来了！
   </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="/css/images/tree.jpg" class="clip-rect-img"/>
</body>
</html>

CSS clip 相关属性

属性说明
clip-path（推荐）使用各种形状和路径定义剪切区域。