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

打印页面