A clipping area describes the portions of an element's rendering
box that are visible (when an element's 'overflow' property is not
set to 'visible'.)
Parent element clipping regions also apply to calculating a current
element's clipping area; in cases where multiple clipping regions
apply to an element, only the intersection of the multiple regions
should be displayed. Be sure to take careful note of the syntax, source
origin and what the measurements mean, as they confused me for a long time!
Explicitly sets the value of this property to that of the parent.
The clipping region is the same size as the element's rendering box.
Only one [shape] syntax is currently understood: rect([top], [right], [bottom], [left])
This syntax defines a rectangular area where [top] and [bottom] specify offsets
from the rendering box's top border edge. [left] and [right] specify offsets
from the rendering box's left border edge (in RtL text, the [left] and [right]
should be offsets from the box's right border edge).
The [top], [right], [bottom], and [left] values can take a standard
[length] unit measurement or 'auto'. Use of the keyword 'auto' in this
case indicates that the clipping region for a specific edge will be the
same as the corresponding side of the element's normal rendering box.
Values may be space- or comma-separated, although comma-separation is the
preferred method. Currently, only a "rect" shape type is defined, but
in the future other clipping shapes may be allowed.
In-Line: <pSTYLE="overflow: scroll;
position: absolute; width: 50px;
clip: rect(5px, 40px, 40px, 5px)">text content
that will be clipped in a prescribed manner</p>
Before its inclusion in CSS2, this property was first proposed in the W3C
Working Draft "Positioning HTML Elements with Cascading Style Sheets" (8/19/97,
CSS2 states that the "rect()" syntax for the side-values "specify offsets
from the respective sides of the box." This wording is not entirely
clear, in that this could be interpreted as meaning measurements are
inwards from their respective sides. CSS2.1 clarifies the
definition to the one stated above.
CSS2.1 clarifies that commas are the preferred value separation method
for left/right/top/bottom values.
Internet Explorer 4+ The 'position' property
must be set to "absolute" for this property to have any effect.
I have yet to come up with a usable test case for "clip: inherit" to
test in NS6...