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>
標準資訊
您可以在 Cascading Style Sheets (CSS), Level 2 (CSS2) (階層式樣式表 (CSS) 層級 2 (CSS2)) .png "Ee371188.xtlink_newWindow(zh-tw,Expression.40).png")
找到此屬性的定義。
適用範圍
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