clip-path属性的探秘之旅🧐

Mr_Carl
3,222 阅读5分钟

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

最近在搭建自己微前端应用的过程中，发现了一个自己之前不曾了解但是却非常有用的css属性: clip-path，在经过一番摸索后，决定将所知所学整理成文，方便日后回顾

接下来我们就一起进入 clip-path 属性的探秘之旅吧~

ppx.jpg

clip-path的前辈：clip

在我们了解clip-path之前，我们先将目光转移到它的前辈: clip 身上

clip属性是用于裁剪元素的，它可以在对应元素内指定一个矩形区域进行裁剪，最终拿到对应元素的矩形子域，它的用法示例如下：

/* 不支持百分比的写法，如 clip:rect(50%, 60%, 30%, 50%)是不合法的 */
div{
  position:absolute;
  clip:rect(0px,60px,200px,0px); 
  clip:rect(50px 250px 250px 50px); /* 兼容IE6, IE7，需要将值之间的逗号去掉 */
}

可以看到它的用法十分简单：以对应元素的左上角为坐标原点，分别设置top, right, bottom, left，同时将该元素的定位设置为absolute或fixed。虽然用法简单，但是它有如下两个缺点：

  • 只对绝对定位(absolute,fixed)的元素有效，而对于relative和static的元素无效
  • 因为只有rect()函数可用，所以只能用来裁剪出矩形

我们再来看看它的兼容性如何

clip.png

可以看到clip的兼容性还是很喜人的，但是由于它存在上述两个缺点，所以导致它的适用场景并不是很多，而本文的主角 clip-path 就是为了解决这两个使用痛点而诞生的，那么接下来我们就好好认识下这个神奇的属性吧~

qiangda.jpg

生来便是主角

clip-path可以应用于任何元素，由于没有clip的第一条限制，因此大大拓宽了适用场景，它支持设置三个属性，列举如下：

  • clip-source：可以使用形如 clip-path:url(resources.svg#c1) 的方式从svg导入裁剪元素的路径
  • basic-shape：绘制图形的函数，种类很多，列举如下：
    • circle，用于裁剪出圆形
    • ellipse，用于裁剪出椭圆形
    • inset，用于裁剪出矩形
    • polygon，用于裁剪出任意图形，最为强大的一个api
  • geometry-box：可以看成裁剪区域的坐标系，里的api的坐标都将以指定的盒子进行定位，如果不指定，默认是border-box，它的取值列举如下：
    • margin-box
    • border-box
    • padding-box
    • content-box
    • fill-box
    • stroke-box
    • view-box

通过属性可以知道clip-path非常强大，借助它我们可以实现任何天马行空的创意~

nice.jpg

下面列出中各个api的具体用法

/*
    需要注意的是，所有api里面的百分比都是以元素宽度作为基准来计算的
*/


/* 
    circle(radius at x-axis y-axis) 
    为了创建圆形，需要给circle传入三个值：圆心的坐标（X值和Y值）以及半径。当定义圆的半径时，我们可以用at关键字来定义圆心坐标。
*/
div {   
  clip-path: circle(50% at 50% 50%);   
}  

/* 
    ellipse(x-radius y-radius at x-axis y-axis) 
    为了实现椭圆，需要给ellipse提供4个值：椭圆的x轴半径、y轴半径、定位椭圆位置的x坐标和y坐标，后面两个值用at关键字和前面两个值分开。
*/
div {   
  clip-path: ellipse(100px 200px at 50% 50%);  
} 

/* 
    inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>)
    使用四个值（对应“上 右 下 左”的顺序）来裁剪矩形和设置圆角半径。 
*/
div {   
  clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);  
  clip-path: inset(25% 0 round 0 25%); /* 简写形式 */
} 

/* 
    polygon(x1-axis y1-axis, x2-axis y2-axis, … )   
    指定各个节点的坐标，不限制数量，最终将所有点连接起来形成裁剪框，从而裁剪出我们需要的形状
    它是最强大的api，通过它我们可以裁剪出包括但不限于上述所有api的图形 
*/
div {   
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);   
}

最后贴一下clip-path的兼容性截图

clip-path.png

我们可以看到该属性的兼容性十分不乐观，IE全系不支持，chrome也要到54才能完全支持，因此造成了该属性虽然强大，但是比较冷门的局面，因为历史包袱的原因让这么牛逼的css属性不能被广泛普及，真是可惜呀~

cat.jpg

结语

css虽然相对于其他语言更简单一些，但是还是有很多地方可以去挖掘，类似于clip-path这样冷门但非常强大的属性应该还有很多，唯有不断去钻研才能开拓自己的眼界，所以加油吧，骚年！🤪

一点小小的请求

既然都看到这里啦，如果你喜欢我的文章，那么请动动你的手指，帮我的文章点个赞或收个藏，xdm的支持是我创作的最大动力，自己单机真不好玩！

最近自己搭建了个人博客，上面会最先发布我写的文章，希望感兴趣的小伙伴都去逛逛，如果能评论留言就更好啦，嘿嘿，期待你们的光临哦~

avatar
文章
阅读
粉丝