css中clip-path的介绍及使用二

前言

css 中 clip-path 我在很久之前就介绍过，还是 2015 年的文章css3 的 clip-path 属性介绍，之前的文章介绍的有点粗略，今天这篇文章详细介绍一下。

语法

【clip-path】值:  | [ ||  ] | none
  : url()
  : inset() | circle() | ellipse() | polygon()
  : fill-box | stroke-box | view-box | margin-box | border-box | padding-box | content-box

初始值: none
应用于: 所有元素
继承性: 无

各形状语法：

Circle: circle(radius at x-axis y-axis)

Ellipse: ellipse(x-rad y-rad at x-axis y-axis)

Polygon: polygon(x-axis y-axis, x-axis y-axis, …) // 每个点的坐标值

Inset: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)

应用

关于剪切路径的应用，可以参考这个地址https://bennettfeely.com/clippy/

里面有各种形状，但是缺少了 insert，今天我详细介绍一下。

圆形 circle

值为一个坐标点和半径组成。左上角为原点，右下角是 (100%,100%) 的点。定义半径的时候可以用 at 关键字来定义坐标。

如下图：

椭圆 ellipse

值为椭圆的 x 轴半径，y 轴半径，定位椭圆的坐标三部分组成。左上角为原点，右下角是 (100%,100%) 的点。at 关键字将半径和坐标分开。和圆形很像。

如下图：

多边形 polygon

值为多个坐标点组成，坐标第一个值是 x 方向，第二个值是 y 方向。
如下图：

Inset 内部裁剪

这个值和上面的不太一样，主要是裁剪，和 margin 有点像。但是又不太完全一样，如下图

值为(上 右 下 左 round 左上角 radius 右上角 radius 右下角 radius 左下角 radius)

round 前面的数值，表示的是距离，如果第一个值为 25%，则表示图像在上面从 25% 开始绘制。

上图解释：30px 200px 200px 20px 意思是距离顶部 30px, 距离右侧 200px, 距离底部 200px，距离左侧 20px。

一般绘制遮罩是用百分比，

 inset(25% 20% 25% 0% round 0 25% 0 25%);

意思是距离顶部 25%，右侧 20%，底部 25%，左侧贴边绘制 0%，圆角为第一个没有圆角（左上角第一个），第二个 25% 圆角度数，第三个没有圆角，第四个 25% 圆角度数。

这样我们可以裁剪一些圆角的效果，例如如下图：

小结

经过 clip-path 的 2 篇文章，详细您已经对 clip-path 掌握了吧，感谢分享 haorooms 博客文章，分享请备注是 haorooms 分享过来的，感谢！