CSS clip:rect矩形剪裁功能及一些应用介绍

今天在一个网站上看到了一个有意思的动画，点我跳转  里面的动画用到了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; width: 50px; height: 50px;">
            </div>

        </a>
    </div>

css代码

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

            .Adv_ico{
                width: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;
                width: 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);}        用clip处理u便签，以便于实现动画效果      
            .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