clip: rect() -- 矩形剪裁功能介绍

      clip:rect(top   right   bottom    left)  具体含义介绍如下：

      top   right   bottom   left  分别指最终剪裁可见区域的上边，右边，下边与左边；

                                                 而所有烦人数值都表示位置，且是相对于原始元素的左上角而言。

      用此例子来说明：rect(30px 200px 200px 20px)

      表示的含义就是：最终剪裁的矩形的上边距离原始元素的上边缘30像素；

                                      剪裁矩形的右边缘距离原元素左边缘的距离是200像素；

                                      剪裁矩形的下边缘距离原元素顶部的距离为200像素；

                                      剪裁矩形的左边缘距离原元素左边缘的距离时20像素。

                                       （可以理解为它 的方向是：顺时针旋转）

                     或者理解为在photoshop中为大背景建四个方向的参考线，如下图（300像素*300像素）所示：

     

                                                                              

                       此功能最主要是在CSS3的帧动画animation和@keyframes中的