CSS CLIP
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, as they confused me for a long time!
Example
| p { overflow: scroll; position: absolute; width: 50px; height: 50px; clip: rect(5px 40px 40px 5px) }
<p style=”overflow: scroll; position: absolute; width: 50px; height: 50px; clip: rect(5px 40px 40px 5px)”>some formatted text</p> |
Possible Values
| Value | Description |
|---|---|
| inherit | Explicitly sets the value of this property to that of the parent. |
| auto | The clipping region is the same size as the element’s rendering box. |
| [shape] | rect([top] [right] [bottom] [left])
This syntax defines a rectangular area where [top], [right], [bottom], and [left] are offsets from each respective side of the element’s rendering box. In the future, other clipping shapes may be allowed. |
>> [top], [right], [bottom], and [left] are offsets from each respective side of the element’s rendering box.
Correction:
1. [top] and [bottom] are both offsets from the TOP edge of the box.
2. [left] and[right] both offsets from the LEFT edge of the box.
Note:
“position” must be set to “absolute”.
MagMatrix, that’s correct.
note: IE does not support property value “Inherit”.