带来一篇CSS教程:clip属性具体解说

表现和结构分离，在团队开发中更容易分工合作而减少相互关联性
破洛洛文章简介：此属性界说了相对(absolute)定位工具可视地区的尺寸。必需将position属性的值设为absolute，此属性方可以使用。
　　clip属性是一个对照有效的属性，但常常在实践使用中，其实不多见，而webjx.com先容的也很少。使用clip属性必要注重的两点：
　　1、clip属性必需和定位属性postion一同利用才干失效。
　　2、clip裁切的盘算坐标都是以左上角即（0,0）点入手下手盘算，如图三所示，这点不像padding和margin，它们两个的右侧距和下边距是从最右侧和最下边入手下手盘算的。
clip属性基本语法：
clip:auto|rect(numbernumbernumbernumber)
取值：
auto:　默许值。工具无剪切
rect(numbernumbernumbernumber):　根据上-右-下-左的按次供应自工具左上角为(0,0)坐标盘算的四个偏移数值，个中任一数值都可用auto交换，即此边不剪切
clip属性申明：
　　检索或设置工具的可视地区。可视地区外的部分是通明的。
　　此属性界说了相对(absolute)定位工具可视地区的尺寸。必需将position属性的值设为absolute，此属性方可以使用。
　　自IE5入手下手，此属性在MAC平台上可用。
　　对应的剧本特征为clip。
　　CSS中的clip属性除能够制造黑色笔墨外，还能够无效地裁切其他网页中的元素。
　　clip属性设置元素的外形。这个属性用于界说一个剪裁矩形。在这个矩形内的内容才可见，出了这个剪裁地区的内容和overflow:hidden的效果不异。剪裁地区大概比元素的内容区年夜，也大概比内容区小。
　　clip属性值：auto|rect(top,right,bottom,left)
　　auto代表不裁切，rect中的上右下左四个偏向填进的应是数值，暗示裁切的地位。
　　上面我举一个对图片举行裁切的复杂例子。
　　起首筹办一张图片，如图一中所示，它的尺寸是159px*99像素。我盘算使用clip属性将图片举行裁切，只让图中的年夜红点显现出来。
　　我先制造一个安排图片的div外框，它的CSS界说以下：
#imgClip{
position:relative;
width:159px;
height:99px;
background:#FFF985;
margin:0auto;
}
　　这个div的定位属性设置为绝对定位是为了让图片以它为定位尺度，将背景界说为#FFF985是为了让显现效果更分明。
　　然后界说图片的裁切属性，CSS界说以下：
#imgClipimg{
position:absolute;
clip:rect(21px68px51px38px);
}
　　这里的相对定位是相对id为imgClip的div而言的，clip中的数值依照上右下左的按次分列的。
　　html代码：
<divid="imgClip">
<imgsrc="http://www.webjx.com/clipimg.gif"width="159"height="99"/>
</div>

可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。