【CSS】clip-path 属性详解

骑着骆驼去南极

于 2024-06-05 11:06:09 发布

阅读量546

点赞数 5

分类专栏： CSS少见属性文章标签： css 前端

本文链接：https://blog.csdn.net/m0_71975585/article/details/139466680

版权

CSS少见属性专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基本语法

selector {
  clip-path: value;
}

值

clip-path 属性接受以下类型的值：

几何形状

circle(): 定义一个圆形。

clip-path: circle(50%);

例如：clip-path: circle(50px at 50% 50%); 表示一个中心在元素中心，半径为50px的圆。

ellipse(): 定义一个椭圆。

clip-path: ellipse(50% 50%);

例如：clip-path: ellipse(50% 25% at 50% 50%); 表示一个中心在元素中心，水平半径为元素宽度的50%，垂直半径为元素高度的25%的椭圆。

inset(): 定义一个矩形区域，可以有圆角。

clip-path: inset(10px 20px 30px 40px);

例如：clip-path: inset(10% 20% 30% 40% round 10px); 表示一个从各边内缩指定距离并且有圆角的矩形。

polygon(): 定义一个多边形。

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

例如：clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 表示一个菱形。

SVG 引用

使用定义在 SVG 内部的元素。

clip-path: url(#clipPathId);

例如：

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <circle cx="50" cy="50" r="50" />
    </clipPath>
  </defs>
</svg>
<div style="clip-path: url(#myClip); width: 100px; height: 100px; background: red;"></div>

URL 引用

引用外部 SVG 文件中的。

clip-path: url('path/to/svg#clipPathId');

示例

使用圆形剪切

<div style="clip-path: circle(50%); width: 200px; height: 200px; background: red;"></div>

使用椭圆剪切

<div style="clip-path: ellipse(50% 25% at 50% 50%); width: 200px; height: 200px; background: green;"></div>

使用 inset 剪切

<div style="clip-path: inset(10% 20% 30% 40% round 10px); width: 200px; height: 200px; background: blue;"></div>

使用多边形剪切

<div style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); width: 200px; height: 200px; background: yellow;"></div>

结合动画

<div class="clip-animated"></div>

<style>
  .clip-animated {
    width: 200px;
    height: 200px;
    background: orange;
    clip-path: circle(0% at 50% 50%);
    animation: clip-animation 3s infinite alternate;
  }

  @keyframes clip-animation {
    0% {
      clip-path: circle(0% at 50% 50%);
    }
    100% {
      clip-path: circle(50% at 50% 50%);
    }
  }
</style>