CSS - clip 属性

CSS 的 clip 属性用于为元素创建剪裁区域，该区域定义元素的可见区域。只有指定的区域可见，其他区域将被隐藏。clip 属性仅适用于具有绝对或固定定位的元素。

语法

clip: auto | shape | initial | inherit;

属性值

值	描述
auto	不会对元素应用剪裁。默认值。
shape	它剪裁元素。唯一可能的值是 rect(top, right, bottom, left)。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

CSS clip 属性示例

以下示例说明了具有不同值的 clip 属性。

带有 auto 值的 clip 属性

为了不对绝对或固定定位的元素进行剪裁，以便整个元素可见，我们使用 clip 属性的 auto 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .sample {
         width: 200px;
         background-color: lightblue;
         padding: 10px;
      }

      .clip-rect {
         position: absolute;
         width: 200px;
         background-color: lightblue;
         padding: 10px;
         clip: auto;
      }
   </style>
</head>

<body>
   <h2>
   CSS clip property
   </h2>
   <p>
      Original text:
   </p>
   <div class="sample">
      TutorialsPoint is an educational platform offering 
      a vast array of tutorials and resources across various
      subjects, including programming, web development, and
      technology. It aims to provide accessible and 
      comprehensive learning materials for learners 
      of all levels globally.
   </div>
   <br/>
   <p>
      Clip: auto value
   </p>
   <div class="clip-rect">
      TutorialsPoint is an educational platform offering
      a vast array of tutorials and resources across various
      subjects, including programming, web development,
      and technology. It aims to provide accessible and
      comprehensive learning materials for learners of
      all levels globally.
   </div>
   <br/>
</body>

</html>

带有 rect() 值的 clip 属性

为了剪裁绝对或固定定位元素的一部分，以便只有指定的区域可见，而其余区域不可见，我们使用 clip 属性的 rect(top, right, bottom, left) 值。指定的值将从顶部和左侧边缘剪裁元素。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .sample {
         width: 200px;
         background-color: lightgreen;
         padding: 10px;
      }

      .clip-rect {
         position: absolute;
         width: 200px;
         background-color: lightgreen;
         padding: 10px;
         clip: rect(0px 170px 140px 0px);
      }
   </style>
</head>

<body>
   <h2>
      CSS clip property
   </h2>
   <p>
      Original text:
   </p>
   <div class="sample">
      TutorialsPoint is an educational platform offering
      a vast array of tutorials and resources across various
      subjects, including programming, web development, 
      and technology. It aims to provide accessible and
      comprehensive learning materials for learners
      of all levels globally.
   </div>
   <br/>
   <p>
      Clip: rect(0px 170px 140px 0px) value
   </p>
   <div class="clip-rect">
      TutorialsPoint is an educational platform
      offering a vast array of tutorials and resources
      across various subjects, including programming,
      web development, and technology. It aims to provide
      accessible and comprehensive learning materials
      for learners of all levels globally.
   </div>
   <br/>
</body>

</html>

带有图片的 clip 属性

clip 属性也可以与绝对或固定定位的图片一起使用。在以下示例中，auto 和 rect(top, right, bottom, left) 值已与图片一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 300px;
         height: 200px;
      }

      .clip-auto {
         position: absolute;
         clip: auto;
      }

      .clip-rect {
         position: absolute;
         clip: rect(0px 140px 170px 0px);
      }
   </style>
</head>

<body>
   <h2>
      CSS clip property</h2>
   <p>Original image:</p>
   <img src="/css/images/white-flower.jpg" 
   />
   <p>
      clip: auto value
   </p>
   <img src="/css/images/white-flower.jpg" 
   />
   <p>
      clip: rect(0px 140px 170px 0px) value
   </p>
   <img src="/css/images/white-flower.jpg" class="clip-rect" 
   />

</body>

</html>

注意

clip 属性已被弃用，并由 clip-path 属性替换
如果 'overflow: visible'，clip 属性将不起作用。

支持的浏览器

属性
clip	1.0	8.0	1.0	1.0	7.0

css_properties_reference.htm

打印页面