mozilla

Revision 28016 of clip

  • Revision slug: CSS/clip
  • Revision title: clip
  • Revision id: 28016
  • Created:
  • Creator: Mgjbot
  • Is current revision? No
  • Comment robot Adding: [[pl:CSS:clip]] <<langbot>>

Revision Content

{{ CSSRef() }}

Summary

clip CSS property defines what portion of an element is visible.

  • {{ Xref_cssinitial() }}: auto
  • Applies to: absolutely positioned elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: For rectangle values, a rectangle consisting of four computed lengths; otherwise, as specified

Syntax

clip: <shape> | auto | inherit

Values

{{ Xref_cssshape() }}
specify a shape of the form rect(<top>, <right>, <bottom>, <left>);
{{ Cssxref("auto") }}
{{ Cssxref("inherit") }}


Examples

{{ CSSRefExampleLink("clip") }}

  img.clip04 { 
    clip: rect(10px, 20px, 20px, 10px);
  }

Notes

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 4
Firefox 1
Netscape 4
Opera 7
Safari 1

See also

{{ Cssxref("overflow") }}, {{ Cssxref("position") }}

{{ languages( { "fr": "fr/CSS/clip", "pl": "pl/CSS/clip" } ) }}

Revision Source

<p> {{ CSSRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>clip</code> CSS property defines what portion of an element is visible.
</p>
<ul><li> {{ Xref_cssinitial() }}: auto
</li><li> Applies to: absolutely positioned elements </li><li> {{ Xref_cssinherited() }}: no </li><li> Percentages: n/a
</li><li> Media: {{ Xref_cssvisual() }}
</li><li> {{ Xref_csscomputed() }}: For rectangle values, a rectangle consisting of four computed lengths; otherwise, as specified </li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">clip: &lt;shape&gt; | auto | inherit
</pre>
<h3 name="Values"> Values </h3>
<dl><dt>{{ Xref_cssshape() }}</dt><dd> specify a shape of the form <code>rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;);</code>
</dd><dt>{{ Cssxref("auto") }}</dt><dd>
</dd><dt>{{ Cssxref("inherit") }}</dt><dd>
</dd></dl>
<p><br>
</p>
<h3 name="Examples"> Examples </h3>
<p>{{ CSSRefExampleLink("clip") }}
</p>
<pre>  img.clip04 { 
    clip: rect(10px, 20px, 20px, 10px);
  }
</pre>
<h3 name="Notes"> Notes </h3>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#clip">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table"> <tbody><tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>4</td> </tr> <tr> <td>Opera</td> <td>7</td> </tr> <tr> <td>Safari</td> <td>1</td> </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p>{{ Cssxref("overflow") }}, {{ Cssxref("position") }}
</p>
<div class="noinclude">
</div>
{{ languages( { "fr": "fr/CSS/clip", "pl": "pl/CSS/clip" } ) }}
Revert to this revision