说起来clip,很多人都感到陌生,这个属性新手不会用,老手不常用。所以很容易被遗忘到角落里面,当看到别人实现炫酷效果时,又想起了这个clip属性。我就是,偶尔看到ele的官网,竟然有了动画效果,他是用js动态修改的顶层高度,其实这个效果还可以用clip实现!

CSS clip裁剪属性的妙用!-Qui-Note

基础知识

clip,裁剪一个形状, 剪裁区域内可见

clip:shape|auto|inherit
  •   shape     设置元素的形状。唯一合法的形状值是:rect (top, right, bottom, left);
  •   auto             默认值,不应用任何剪裁
  •   inherit 规定应该从父元素继承 clip ,属性的值

  
注意:1.rect的形状按照上、右,底,左的顺序排列,顺序和圆角的一样!
          2.必须配合绝对定位使用

.clip{position: absolute;clip: rect(0px,300px,200px,0px);}

clip为什么不显示?

1.没有配合绝对定位使用,父盒子相对定位、裁剪元素绝对定位;
2.正常的top小于bottom,left小于right;
3.clip仅支持rect矩形选区,其余的不支持;更多路径,需要用clip-path。

应用场景:

1.剪切固定宽高头像;
2.制作歌词效果;在线预览:https://course.51qux.com/clip
3.制作炫酷2层效果,下滑时,上层通过clip一点点的显示,然后与底层的形成对比效果!

兼容性
根据can i use的结果可以得出:移动端仅UC安卓端和欧朋mini不支持,连IE8+都可以放心使用,惊呆了吧!完全可以放心使用!
CSS clip裁剪属性的妙用!-Qui-Note