clip属性

今天在一个网站上看到了一个有意思的动画，点我跳转  里面的动画用到了clip属性 

clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果，今天还是偶然间才看到这个属性，既然看见了自己不知道，那就不能放她走，我们来具体看下这个属性怎么用

这个属性在CSS2.1中就已经稳稳地存在，其中有四个属性

其中，据说继承inheritIE浏览器是不支持的，所以该属性打酱油的；然后"auto"就是不剪裁之意，除了重置rect的作用外，其也是个酱油副帝；所以真正的大咖就是rect(top right bottom left)，所以，我们只讨论rect(top right bottom left)

rect(top right bottom left)这个属性其实是跟margin属性一样，是按顺时针来设置的，你可以这样想，有一个大大方块，我从上面右面，下面，左边依次咔咔的剪裁，来看个例子

rect(30px 200px 200px 20px)

依次从上右下做来剪裁

注意：clip:rect矩形剪裁只能作用于position:absolute的元素上。

clip:rect矩形剪裁的一些应用介绍

1. 可用性隐藏
根据上面对top right bottom left的释义，如果left >= right或者bottom <= top，则元素会被完全裁掉而不可见，即“隐藏”。通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的，从而提高了页面的可用性。

例如：

clip: rect(1px 1px 1px 1px); /*left = right, bottom = top*/

或

clip: rect(10px 10px 10px 100px); /*left > right*/

或

clip: rect(100px 10px 10px 10px); /*bottom < top*/

clip结合hover做一些66的特效

在开头，链接跳转的网页中的用clip结合的特效代码我已经整理下来

<div class="Adv_area">
      <a href="javascript:void(0)" title="">
          <div class="Adv_ico">
              <u class="cl"></u>
              <u class="cr"></u>
              <img src="img/pro_ico6b.png" alt="产品优势" style="top: 21px; left:19px;  50px; height: 50px;">
          </div>

      </a>
  </div>

css代码

.Adv_area{ max- 200px; margin: 0 auto; text-align: center; }

           .Adv_ico{
               90px;
               height:90px;
               overflow:hidden;
               margin:0 0 0 50px;
               position:relative;                   设置大容器的宽高，并将border设置为100%来达到圆的效果
               z-index: 99;
               background: #757575;
               border: 2px solid #fff;
               border-radius:100%;
               -ms-border-radius:100%;  /* IE 9 */
               -moz-border-radius:100%;     /* Firefox */
               -webkit-border-radius:100%; /* Safari 和 Chrome */
               -o-border-radius:100%;   /* Opera */
           }
           .Adv_ico u {
               display: block;
               position: absolute;
               z-index: 11;
               left: -4px;
               top: -2px;                        将u标签设置为块级元素，并加上动画（标签层级不能高于图片）
               margin: 0;
               padding: 0;
                92px;
               height: 92px;
               background: #1161c0;
               border: 3px solid #fff;
               border-radius:100%;

               transition: all .5s ease-in-out 0s;
           }
           .Adv_ico u.cl { clip:rect(0px, 105px,0, 52px); }
           .Adv_ico u.cr { clip:rect(105px,52px,105px,0px);}        <span style="color:#ff0000;">用clip处理u便签，以便于实现动画效果     </span>
           .Adv_ico img{ position: absolute;  z-index: 12;  float: left; overflow: hidden;}

.Adv_area:hover u.cl { clip:rect(0px,105px,105px,52px);}
.Adv_area:hover u.cr { clip:rect(0px,52px,105px,0px);}        添加hover伪类

ps:

在 HTML 中，<u>元素 已废弃（<u> 元素被用来定义下划线）。

HTML5 中重新定义了 <u> 元素，它定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词

也可以结合background-image属性与sprite结合clip来制作动画，来看下张大神的案例http://www.zhangxinxu.com/study/201104/css-rect-img-sprite-png.html

最后，本人才疏学浅，用clip属性制作更好的效果各位看官可以试试，有更厉害的发现可以告诉我，小弟在这感激不尽，附上W3C的clip()详解

https://www.w3.org/TR/CSS21/visufx.html#clipping