共用方式為


clip

設定要顯示定位物件的哪個部分。

語法

{ clip: sClip }

可能的值

sClip

指定或接收下列其中一個值的字串:

auto

預設值。裁剪成顯示完整的物件。

rect (top right bottom left)

top、right、bottom 及 left 值可指定長度值。上述各值均可取代為 auto,而不裁剪該側。top 值可指定裁剪 Y 軸 (頂端為 0) 上大於該值的所有部分。right 值可指定裁剪 X 軸 (左側為 0) 上大於該值的所有部分。bottom 值可指定裁剪 Y 軸 (頂端為 0) 上小於該值的所有部分。left 值可指定裁剪 X 軸 (左側為 0) 上該值左側的所有部分。

此屬性的預設值為 auto。這不是繼承屬性。

備註

此屬性可定義顯示之定位物件的形狀與大小。position 必須設為 absolute。物件中位於裁剪區域外的所有部分都會變成透明。任何座標都可取代為 auto 值取代,以顯示個別的側邊 (即不裁剪該側)。

clip 值的順序:rect(0 0 50 50) 會使物件呈現隱藏狀態,因為它將裁剪區域的頂端與右側設為 0。若要取得 50 x 50 的檢視區,請使用 clip:rect(0 50 50 0)

自 Microsoft Internet Explorer 5 起,clip 屬性即可用於 Macintosh 作業系統。

範例

下列範例顯示如何使用內嵌樣式來裁剪影像:

<html>
<body>
  <div style="position: absolute; top: 0; left: 200; clip: rect(15px auto auto auto);">
    <img src="sphere.jpg"/>
  </div>
  <div style="position: absolute; top: 0; left: 300; clip: rect(auto 15px auto auto);">
    <img src="sphere.jpg"/>
  </div>
  <div style="position: absolute; top: 0; left: 400; clip: rect(auto auto 15px auto);">
    <img src="sphere.jpg"/>
  </div>
  <div style="position: absolute; top: 0; left: 500; clip: rect(auto auto auto 15px);">
    <img src="sphere.jpg"/>
  </div>
</body>
</html>

標準資訊

此屬性是在階層式樣式表 (CSS) 層級 2 (CSS2) (英文) 中定義。

適用於

A、ADDRESS、APPLET、B、BDO、BIG、BLOCKQUOTE、BUTTON、CENTER、CITE、CODE、CUSTOM、DD、DEFAULTS、DFN、DIV、DL、DT、EM、EMBED、FIELDSET、FORM、HN、HR、I、IFRAME、IMG、INPUT TYPE=BUTTON、INPUT TYPE=CHECKBOX、INPUT TYPE=FILE、INPUT TYPE=IMAGE、INPUT TYPE=PASSWORD、INPUT TYPE=RADIO、INPUT TYPE=RESET、INPUT TYPE=SUBMIT、INPUT TYPE=TEXT、LI、OBJECT、OL、P、RUBY、S、SELECT、SPAN、SUB、TABLE、TD、TH、TR、TT、U、UL、VAR、XMP

請參閱

概念

overflow