clip | Loop and Break

The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.

Values

<shape>
A rectangular of the form

rect(<top>, <right>, <bottom>, <left>) /* standard syntax */

rect(<top> <right> <bottom> <left>) /* backwards compatible syntax */

where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box.
<top>, <right>, <bottom>, and <left> may either have a <length> value or auto.
auto
The element does not clip (default value)

<!DOCTYPE html>
<html>
    <head>
        <style>
            #img2 {
                position: absolute;
                left: 263px;
                clip: rect(40px, 200px, 150px, 30px);
                /* standard syntax, unsupported by Internet Explorer 4-7 */
            } #img3 {
                position: absolute;
                left: 526px;
                clip: rect(40px 200px 150px 30px);
                /* non-standard syntax, but supported by all major 
                 * browsers including Firefox and IE */
            }
        </style>
    </head>
    <body>
        <img id="img2" src="Untitled-1.jpg" />
        <img id="img3" src="Untitled-1.jpg" />
    </body>
</html>

Categories

Values