css clip样式 属性功能及作用

 

clip

clip 在学前端的小伙伴前，估计是很少用到的，代码中也是很少看见的，但是，样式中有这样的代码，下面让我们来讲讲他吧！

这个我也做了很久的开发没碰到过这个属性，知道我在一个项目中，有一个功能点，我在检查元素的时候，看别人的代码的时候，

发现了这个样式，很好奇，所以就搜了一下，但是我用了一下，发现没用，就在其他人的博客，还有w3scholl仔细看了一下，

才发现一个问题 

他的作用功能是剪裁，但是只在绝对定位元素下才起作用的，例：position: absolute；等

.hhh{
    position:absolute;
    clip: rect(0 76px 38px 0);
}

rect括号里的参数：

第一个参数：剪裁矩形距离父元素顶部的长度。

第二个参数：剪裁矩形距离父元素左边的长度 + 矩形宽度。

第三个参数：剪裁矩形距离父元素顶部的长度 + 矩形高度。

第四个参数：剪裁矩形距离父元素左边的长度。