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

CSS clip裁剪属性的妙用！-QUI-Notes

基础知识

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-Notes