转载

CSS clip 剪裁（图像）属性

CSS clip 对象剪裁属性

语法：

clip : auto | rect ( number number number number )

参数：

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

说明：

检索或设置对象的可视区域。区域外的部分是透明的。
必须将position的值设为absolute，此属性方可使用。
自IE5开始，此属性在MAC平台上可用。
对应的脚本特性为 clip 。

实例

剪裁图像：

img

  {

  position:absolute;

  clip:rect(0px,60px,200px,0px);

  }

示例：

div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }

div { position:absolute; width:60px; height:60px; clip:rect(1cm auto 50px 10cm); }

扩展阅读：

浏览器支持

IE	Firefox	Chrome	Safari	Opera

所有主流浏览器都支持 clip 属性。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

clip 属性剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

说明

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

默认值：	auto
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.clip="rect(0px,50px,50px,0px)"

可能的值

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。