clip
clip属性是在ie8之后才拥有的css属性，它的主要功能是实现网页的裁剪功能，不一定是要裁剪图片，其实主要的在使用中，我们用它来裁剪可见区域。
clip: rect(0px,100px,100px,0)
clip的用法是固定使用的rect方法，传入四个参数，这四个参数的方向是上右下左，分别代表着被裁剪区域的上下左右四条边界线，如果一个div的大小为宽50px，高100px，
- 第一个参数，表示上边界的位置，初始为0px，增大，则上边界线向下移，减小，边界线就想上移
- 第二个参数，表示右边界的位置，初始值为区域的宽度（以上为例则为100px），增大，边界线向右移动，减小，边界线向左移动
- 第三个参数，表示下边界的位置，初始值为区域的高度（以上为例则为50px），增大，边界线上下移动，减小，边界线向上移动
- 第四个参数，表示左边界的位置，初始值为0，增大，边界线向右移动，减小，边界线向左移动
那么：
- clip：rect(0,100px,50px,0)不会对此div有任何影响
- rect(0,100px,25px,0)裁剪此区域上半部分
- rect(25px,100px,50px,0)裁剪此区域的下半部分
- rect(0,50px,50px,0)裁剪此区域的左半部分
- rect（0，100px,50px,50px）裁剪此区域的有半部分。
利用clip属性制作css3动画
@keyframes clipMe {
0%, 100% {
clip: rect(0px, 220.0px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220.0px, 0px);
}
50% {
clip: rect(218.0px, 220.0px, 220.0px, 0px);
}
75% {
clip: rect(0px, 220.0px, 220.0px, 218.0px);
}
}
利用裁剪区域的变化来实现区域动画，如：