冰剑'blog

今天说一下CSS的clip属性，这个属性可能不经常用，但是也是比较有用的属性之一。
我们先来看一下它的语法：

 语法：clip : auto | rect ( number number number number )

取值： auto: 默认值。对象无剪切； rect ( number number number number )：依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切

 以上引用自苏昱的：样式表中文手册。

clip它相当于一个遮罩，允许你遮住一个矩形元素的一部分。你必须为元素定义绝对定：absolute属性。制定一个相对于元素的top、right、bottom和left值。但是这4个值并不是和我们常用的border、margin、padding等的4个值的取值方法一样。具体看下图：

这里要注意的是right的值是从最左边开始算起的，bottom值是从最上面开始算起的。

下面我们来看两个例子：

1、图像裁剪的例子（点这里查看演示）：

        用clip属性给图片一个遮罩，首先指定一个div元素position属性为：relative；然后在里面的img的css图像设置为：position:absolute;clip:rect(30px 165px 100px 30px);

用到的css如下：

.clip {
    position: relative;
    height: 130px;
    width: 200px;
    border: solid 1px #000;
    margin:40px 0;
}
.clip img {
    position: absolute;
    clip: rect(30px 165px 100px 30px);
}

2、调整图像大小的例子（点这里查看演示）：

原始图像为高200px，宽140px的图像，我现在要做一个它的缩略图，等比的话宽是100px，高为70px。但是既然是缩略图，我们可以设置为相等宽高的。这时我们可以用clip来裁剪图片多出的部分。

clip: rect(0 85px 70px 15px);详细解释：
总共宽度为100px，减去30px，则两边一边减去15px；
top=0，图像本来高度就是70，所以不用裁剪，top为0；
right=85，左边的15加上图像宽度70，即为这个值；
bottom=70，也不用裁剪，但是需从最上面取值；
left=15；
由于图片右边的15px已经裁剪掉，左边还有15px的空间，所有需要在图片上再添加left:-15px;去“取消”这个因裁剪留下的空白。

用到的css如下：

.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery li {
    float: left;
    margin: 0 10px 0 0;
    position: relative;
    width: 70px;
    height: 70px;
    border: solid 1px #000;
}
.gallery img {
    width: 100px;
    height: 70px;
    position: absolute;
    clip: rect(0 85px 70px 15px);
    left: -15px;
}

这篇文章是我根据webdesignerwall网站上的一片文章，将其一部分翻译过来了。其实也不算是翻译，只是按照自己的理解给重新说明了一下。

本文地址：http://www.xunzou.com/blog/post/605.html

原文地址：http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/