clip 属性剪裁绝对定位元素。所有的主流浏览器都支持该元素。

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

基本语法

用法

clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */

示例

<style>
    .demo-clip {
        background: rgb(168, 231, 168);
        width: 100px; 
        height: 100px;
        position: absolute;
        clip: rect(5px 75px 75px 5px);
        clip: rect(5px, 75px, 75px, 5px);
    }
</style>
<div class="demo-clip">
</div>

可以看到rect(top, right, bottom, left)四个值指的是相对左上角(0, 0)的偏移数值。

有趣的实现

炫彩文字

<style>
.demo-color-text {
    position: relative;
    font-size: 26px;
    background: #f6f6f6;
    height: 3em;
    width: 10em;
}
.demo-text-top {
    position: absolute;
    color: #CC0000;
    left: 2em;
    top: 1em;
    clip: rect(0 auto 13px 0);
    clip: rect(0, auto, 13px, 0);
}
.demo-text-bottom {
    position: absolute;
    color: #333333;
    left: 2em;
    top: 1em;
    clip: rect(13px, auto, auto, auto);
}
</style>
<div class="demo-color-text">
    <div class="demo-text-top">colorful text</div>
    <div class="demo-text-bottom">colorful text</div>
</div>

hover控制图片的显示

<style type="text/css">
.demo-show-hide {
    position: relative;
    background: #f6f6f6;
    margin: 10px 0;
    width: 15em;
    height: 10em;
    padding: 10px;
}
.demo-hover-btn {
    background: #CC0000;
    display: block;
    padding: 3px;
    width: 5em;
    margin: 3px 0;
    color: #fff;
    cursor: pointer;
    text-align: center;
}
.demo-hover-btn:hover {
    background: #333;
}
.demo-hover-img {
    position: absolute;
    display: block;
    top: 45px;
    left: 10px;
    clip: rect(120px 0 0 160px);
    clip: rect(120px, 0, 0, 160px);
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.demo-hover-btn:hover ~ .demo-hover-img {
    clip: rect(0 160px 120px 0);
    clip: rect(0, 160px, 120px, 0);
}
</style>
<div class="demo-show-hide">
    <span class="demo-hover-btn">
        hover me
    </span>
    <img class="demo-hover-img" src="http://img3.douban.com/icon/ul29163290-16.jpg">
</div>