CSS - clip-path 屬性

CSS 的clip-path 屬性用於為元素定義剪裁區域。剪裁區域決定了元素的哪些部分可見，哪些部分隱藏，透過遮蔽元素的部分來建立視覺效果。

語法

clip: path | basic-shape | margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | none | initial | inherit;

屬性值

值	描述
path	它定義了指向 SVG <clipPath> 元素的 URL。
基本形狀	它將元素剪裁成一些基本形狀，例如圓形、橢圓形、多邊形或內嵌。
margin-box	它使用外邊距框作為參考框。
border-box	它使用邊框框作為參考框。
padding-box	它使用內邊距框作為參考框。
content-box	它使用內容框作為參考框。
fill-box	它使用填充框作為參考框。
stroke-box	它使用描邊框作為參考框。
view-box	它使用視區框作為參考框。
none	不對元素進行剪裁。預設值。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS Clip Path 屬性示例

以下示例說明了具有不同值的clip-path 屬性。

使用 SVG 路徑的 Clip Path 屬性

要對元素執行剪裁，我們可以使用 SVG 指定剪裁形狀。形狀的定義使用 <clipPath> 標籤指定，可以使用它建立自定義剪裁形狀。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      #clip-img {
         clip-path: url("#clip-img")
      }
   </style>
</head>

<body>
   <h2>
      CSS clip-path property
   </h2>
   <h4>
      clip-path: url("#clip-img")
   </h4>
   <svg height="0" width="0">
   <clipPath id="clip-img">
      <rect y="44" x="120" width="80" height="80" />
      <rect x="40" y="120" width="80" height="80" />
      <rect x="120" y="200" width="80" height="80" />
      <rect x="1900" y="120" width="80" height="80" />
   </clipPath>
</svg>
   <img id="clip-img" height="200" 
   width="200" src="/css/images/content.png">
   <h4>
      Image used:
   </h4>
   <img height="150" width="150" 
   src="/css/images/content.png">
</body>

</html>

使用基本形狀的 Clip Path 屬性

要對元素執行剪裁，我們可以將剪裁形狀指定給clip-path 屬性。一些常用形狀包括circle()、ellipse()、polygon()、inset() 等。這些形狀的尺寸可以作為引數提供。這些形狀已在以下示例中使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .image-container {
         display: flex;
      }

      .dimensions {
         width: 200px;
         height: 200px;
      }

      .clip-inset {
         clip-path: inset(10% 10% 10% 10% round 10% 10% 10% 10%);
      }

      .clip-circle {
         clip-path: circle(50%);
      }

      .clip-ellipse {
         clip-path: ellipse(100px 50px at 100px 100px);
      }

      .clip-ploygon {
         clip-path: polygon(0 50%, 100% 50%, 50% 100%, 50% 0);
      }

   </style>
</head>

<body>
   <h2>
      CSS clip-path property
   </h2>
   <h4>
      clip-path: inset(10% 10% 10% 10% 
      round 10% 10% 10% 10%)
   </h4>
   <div class="image-container">
      <img src="/css/images/content.png" 
      class="clip-inset dimensions">
   </div>
   <h4>
      clip-path: circle(50%)
   </h4>
   <div class="image-container">
      <img src="/css/images/content.png" 
      class="clip-circle dimensions">
   </div>
   <h4>
      clip-path: ellipse(100px 50px at 
      100px 100px)
   </h4>
   <div class="image-container">
      <img src="/css/images/content.png" 
      class="clip-ellipse dimensions">
   </div>
   <h4>
      clip-path: polygon(0 50%, 100% 50%, 
      50% 100%, 50% 0)
   </h4>
   <div class="image-container">
      <img src="/css/images/content.png" 
      class="clip-ploygon dimensions">
   </div>
</body>

</html>

支援的瀏覽器

屬性
clip-path	55.0	79.0	3.5	9.1	42.0

css_properties_reference.htm

列印頁面