如果网页设计中一个绝对定位元素的内容溢出其内容框，而且overflow设置为要求剪裁该内容，通过使用属性clip可以改变剪裁区域的形状。

默认值auto表示元素的内容不应剪裁。还可以相对于元素内容区定义一个剪裁形状。这不会改变内容区的形状，而只是改变将显示内容的区域形状。

注意：尽管网站建设CSS2中唯一可用的剪裁形状是矩形，不过规范确实指出，在将来的规范中可能会有其他形状，

clip

值：rect(top,right, bottom,left)| auto | inherit

初始值：auto

应用于：绝对定位元素（在CSS2中，clip应用于块级元素和替换元素）

继承性：无

计算值：对于矩形，4个计算长度表示剪裁矩形区域的4个边，否则，根据指定确定

这是利用形状值rect实现的。可以如下指定剪裁区域内不做修改：

clip: recc(0, auto, auto, 0)；

网页设计rect的语法很有意思。从技术上讲，可以是rect(top, right,bottom,left)，注意这里的逗号，不过网站建设CSS2规范提供的例子中有些有逗号，有些没有逗号，而且将rect定义为这两种版本都能接受。在此，我们还是采用有逗号的版本，主要是因为这样更岛读，而且这是网站建设CSS2.1中推荐的做法。

有一点极为重要，rect(...）的值不是边偏移，而是距元素左上角的距离（在从右向左读的语言中，则是与元素右上角的距离）。因此，如果一个剪裁矩形涵盖元素左上角20 x 20像素的一个正方形，可以定义如下：

rect(0, 20px, 20px, 0)

rect (...)只允许长度值和auto，如果设置为auto，这相当于将剪裁边界设置为适当的内容边界。因此，以下两个语句含义相同：

clip: rect(auto, auto, 10px, 1em);

clip: rect(0, 0, 10px, 1em);

由于网页设计中clip中的所有偏移都是距左上角的偏移，所以不允许有百分数，实际上不可能创建一个“中心”剪裁区域，除非你知道元素本身的大小。考虑以下情况：

div#sidebar {position: absolute; top: 0; bottom: 50%; right: 50%; left: 0; clip: rect(1em,4em,6em,1em)；)

由于无法知道元素会有多高或多宽，所以无法定义这样一个剪裁矩形，要求它最后在元素内容区向右1em或向下1em处。要想知道元素的大小，唯一的办法就是设置元素本身的高度和宽度：

div#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;

clip: rect(1em,4em,6em,1em);}

这会得到如图10-34所示的结果，这里增加了一个虚线表示剪裁区域的边界。这条线在显示文档的用户代理中并不会真的出现。

不过，网页设计人员可以设置负长度值，这会使剪裁区域延伸到元素框之外。如果你想将剪裁区域向上向左移0.25英寸，可以使用以下样式（如图10-35所示）

clip: rect(-0.25in, auto, auto,-0.25in);

可以看到，这没什么好处。尽管剪裁区域向上向左延伸了，不过由于延伸区域内没有任何内容，所以没有多大差别。

另一方面，完全可以超越下边界和右边界，但不能超越上边界或左边界。图10-36显示了以下样式的结果（要记住，这里的虚线只是为了说明，并不实际存在！）：

div#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em; clip: rect(0,6em,9em,0);}

这会扩展可以看到内容的区域。不过，内容流并没有改变，所以唯一的视觉效果就是元素下面可以看到更多的内容。文本没有向右流，因为其行框的宽度仍受定位元素宽度的限制。如果有一个比定位元素宽的图像，或者有一个很长的预定义格式文本行，则可能在定位元素的右边也可见（直到剪栽区域结束的位置）。

网页设计人员可能已经认识到，rect(...)的语法与网站建设CSS的其他语法相比不太一样。原因是它基于早期的定位草案，而该草案使用了左上偏移机制。在CSS2之前，实现这个语法的Internet Explorer巳经成为完备推荐，所以它与最终的rect (...)语法冲突，因为最后已经将rect(...)修改为使用边偏移（类似于CSS2的其余部分）。这么做是为了保证定位一致，这是合情合理的。

图10-36：剪裁区域从元素框向下向右延伸

不过，等到这个时候已经太晚了：市场上已经有了具体实现，所以没有要求Microsoft修改浏览器（因为这可能破坏现有的页面），而是将标准修改为适应这个实现。遗憾的是，正如前面所看到的，这意味着如果高度和宽度没有明确定义，将无法设置一致的剪裁区域。

rect(...)只接受长度单位和auto，这使问题更为严重。要让百分数单位也成为合法的rect (...)值可能还有很长的一段路要走，也许将来的网站建设CSS版本会增加这个功能。

警告：从clip悠久复杂的历史可以看出，当前浏览器中clip的实现方式并不一致，在所有跨浏览器的环境中都不能指望clip肯定采用某一种方式实现。