标签：.com w3c web upload 关注 img ott 实现 而且
Clip属性是大家经常会误解的一个属性，这篇文章帮助大家充分的了解和学习clip属性，用这个属性制作出更好的效果。
我可以确定Clip属性有很多同学并不知道，因为这个属性使用率非常的底，我初次接触是在Drupal的主题之中，他们有一段用来隐藏文本的代码，就是使用的clip属性。
/* Hide only visually, but have it available for screenreaders*/ .visuallyhidden { border: 0 none !important; clip: rect(1px 1px 1px 1px);/*IE<8*/ clip: rect(1px,1px,1px,1px); height: 1px !important; margin: -1px; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px; }
如果你不知道也不用担心，接下来的内容将会涵盖clip属性的各个方法。详细阅读这篇文章，你将对clip属性有一个很深的了解。
Clip属性在W3C官网是这样进行描述的：“通过对元素进行剪切来控制元素的可显示区域，默认情况下，元素是不进行任何剪切的，但是也有可能剪切区域也显示的设置了clip属性”。
大家应该看过使用javascript的插件来剪切元素，但是你也可以使用CSS的clip属性实现，也许会有一些限制，但我们可以一起看看。
想要了解clip属性，我们很有必要先学习clip的语法知识：
.selector { clip: <shape> auto inherit }
首先你要注意：clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。clip无法在设置“position:relative”和“position:static”上工作。
说实话,我真的不知道为什么是这样的。至少,我在网络上没有发现任何有关于这方面的话题,因此,如果你要是知道为什么，希望您能在下面的评论中分享一些知识。
上面的语法告诉我们，clip属性只接受三个不同的属性值：
很多时候，你可能希望有更多的shape函数功能使用，比如说rect()和circle()等，但是到目前为止仅有rect()函数可使用，不过不用担心，这个功能就可以帮我们制作很多很酷的效果。
接下来我们来看rect()使用方法。rect()需要设置四个值：top, right, bottom和left。他们之间需要用逗号隔开，而且rect()属性值和margin、padding以及bodrder具有一样的标准，遵循TRBL顺时针旋转的规则。
clip: rect(<top>, <right>, <bottom>, <left>);
在CSS2.1中，rect()和<top>和<bottom>指定偏移量是从元素盒子顶部边缘算起；<left>和<right>指定的偏移量是从元素盒子左边边缘算起。
我们简单的来看一个例子：
p#one { clip: rect(5px, 40px, 45px, 5px); } p#two { clip: rect(5px, 55px, 45px, 5px); }
上面的例子是在50X55px的长方形盒子中是行剪切，得到虚线的长方形：
<top>, <right>, <bottom>, <left>可以将值设置为“auto”或者长度值<length>。而且还可以充许负的长度值。其中取值为“auto”时，剪切区域的边缘和元素盒子边缘相同。例如：在<top>和<left>设置为auto时，他们就相当于top和left取值为0；如果<right>和<bottom>设置为auto时，他们就相当于元素的宽度（这个宽度包括元素的border、padding和width），或者简单的理解为100%。
针对上面所言，将clip分为以下几种：
1、不显示剪切区域：当rect()中的bottom值小于top值，或者right值小于left值时，整个剪切区域不会显示。例如：
.rect2 img { clip: rect(13px,0,161px,30px);/*right值小于left值*/ } .rect3 img { clip:rect(13px, 164px, 0, 30px);/*bottom值小于top值*/ }
2、top和left取值为auto，当top或者left取值为auto时，相当于取值为0；
.rect4 img { clip: rect(auto, 164px, 161px, 30px); } .rect5 img { clip: rect(13px, 164px, 161px, auto); }
rect(auto,164px,161px,30px)效果
rect(13px,164px,161px,auto)效果
3、bottom和right取值为auto，当bottom和right取值为auto时，相当于元素的100%宽度。
.rect6 img { clip: rect(13px, auto, 161px, 30px); } .rect7 img { clip: rect(13px, 164px, auto, 30px); }
rect(13px,auto,161px,30px)效果
rect(13px,164px,auto,30px)效果
3、bottom和right取值为auto，当bottom和right取值为auto时，相当于元素的100%宽度。
详细点击demo。
rect()不能支持百分比值，这一点需要特别的注意。
你可能会很关注，这个属性的兼容性不知道如何？请放心，clip属性得到较好的支持，在chrome1.0+、firefox1.0+、opera7.0+、safari1.0+和ie8.0+都支持标准语法，但在ie4.0至ie7.0我们还是需要做一定的处理，需要把每个属性值之间的逗号去掉。
.my-element { position: absolute; clip: rect(10px 350px 170px 0); /* IE4 to IE7 */ clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */ }
需要特别的注意，ie4-ie7的要写在标准语句的前面，不然其他浏览器下将会无任何效果。
上面是各种理论的讲解，接下来我们一起来动手做一个案例，通过clip实现行内sprites的效果。
要制作上图的一个效果，我们平时都是使用三个图来制作，那么使用clip属性我们也可以在行内使用sprites图来实现上图的效果，这两者的区别我就不多说，大家看看他们的对比截图：
图中说明一切，接下来我们主要看的是如何使用clip实现效果，先写个简单的HTML结构：
<ul id="wrapper"&ht; <li&ht;<img src=http://www.webjx.com/css/"icons.png" alt="Happy Icon" class="icons happy" /&ht;</li&ht; <li&ht;<img src=http://www.webjx.com/css/"icons.png" alt="Sad Icon" class="icons sad" /&ht;</li&ht; <li&ht;<img src=http://www.webjx.com/css/"icons.png" alt="Angry Icon" class="icons angry" /&ht;</li&ht; </ul&ht;
一个很简单的结构，初步的效果如下：
先来给他一个基本布局样式：
* { margin:0; padding: 0; } #wrapper { position: relative; width: 386px; margin:50px auto; list-style: none outside none; } #wrapper li { width: 128px; height: 128px; float: left; position: relative; }
此时效果如下：
这离我们需要的效果还相差很远，接下来就需要clip来发挥他的功能了，我们简单先分析一下，对于这三个脸谱，距离顶部的距离都是“0”而距离底部都是“128px”，这样我们就确定两个参数了，只需要对每个脸谱确定left和right的参数。
先来看sad脍，他是在sprites图片的最左边，那么我们可以明显的确定他的另外两个值：left为0;right为128px，如下图所示：
对于happy脸，我们在sprites图中间，根据相关参数，我们可以推算或者测量出其left值为128px，right值为256px，但这个时候有一个细节，我们使用clip进行剪切，前面会留有空白（也就是sad脸位置）,为了能正常显示，需要在这个Img中设置一个left值为“-128px”,将happy拉出来：
最后一张是angry脸，按前面的方法我们很容易的得到left值为256px，right值为384px(在这里也可以是auto，前面有讲过)，同样前面有占位的，也需要用left值拉回来：
详细代码如下：
.icons { position:absolute; top:0; left:0; } .happy { clip: rect(0 256px 128px 128px); left:-128px; } .angry { clip: rect(0 384px 128px 256px); left:-256px; } .sad { clip: rect(0 128px 128px 0); }
如此一来，效果就出来了，大家可以点击这里查看效果。
这里展示的是仅是其中一个很简单的案例效果，其实你可以发挥你的想像力，配合一些css3的特效制作出一些很酷的效果。
这是一个很特殊的属性，也是一个很少见的属性，少见是由于他不被人了解，虽然他受限蛮多，但在一些情况下使用这个属性能轻松的帮你实现你需要的效果。而且这个属性使用也并不复杂。通过上面的介绍，大家应该对clip有所了解了。希望这篇文章能对大家有所收获。
标签：.com w3c web upload 关注 img ott 实现 而且
原文地址：http://www.cnblogs.com/xdxx/p/7395748.html
