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