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

列印頁面