clip

clip

設定一塊矩形格子（box），元素的內容可以顯示在其中，超出部分會隱藏。預設為元素的矩格。使用 clip 必須將 position 設為 absolute 或 fixed。可設定的值有：

1. <shape>：可以設為矩形 rect(上, 右, 下, 左)。 上 右 下 左是相對於元素矩格的左上角的距離。上 右 下 左可設為<length>或是 auto。auto 是與元素矩格相同。
   
2. auto： 切割區尺寸與元素的矩格相同，此為預設值。
3. inherit：繼承父元素的特徵值。

• 下面的第二張圖像設了 clip: rect(10px, auto, 170px, 40px); position:absolute，所以展現風格與第一個不同。在 IE6，rect() 中不能加”,”作分隔；但是 IE8, Firefox, Safari, Chrome 可以。

<img src="http://4.bp.blogspot.com/_66l2ZxYOqcM/SZe-PAdO0RI/AAAAAAAAAFA/3Qji4cm19G4/s200/absolute.JPG" />    <img style='clip: rect(10px auto 170px 40px); position:absolute' src="http://4.bp.blogspot.com/_66l2ZxYOqcM/SZe-PAdO0RI/AAAAAAAAAFA/3Qji4cm19G4/s200/absolute.JPG" />

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {position:absolute; clip:rect(40px 160px 160px 40px); } .hvr:hover {clip:rect(40px auto 160px auto);} .hvr:active {clip:rect(auto auto auto auto);} </style> <div style='position:relative; background:red; width:200px; height:200px'> <img class=hvr src='http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg' /> </div>

改寫 ANCHOR，將 :hover, :active 狀態傳給子元素；如此在 IE6 中，也可以使用 :hover, :active 於一般元素。:active 在 IE6 的效果不佳。 <style type='text/css'> .akr {display:block; position:relative; background:red; width:200px; height:200px } .akr IMG {position:absolute; clip:rect(40px 160px 160px 40px); } .akr:hover {border:none; background:red} .akr:hover IMG {clip:rect(40px auto 160px auto);} .akr:active IMG {clip:rect(auto auto auto auto);} </style> <a href='javascript:void(0)' class=akr> <img src='http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg' /> </a>

javascript 應用。可以用 style 物件 的特徵 clip 讀取或設定特徵值。 <div style='position:relative; background:red; width:200px; height:200px'> 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. <img id='atr3' style='position:absolute; clip:rect(10px 160px 160px 10px); top:0px; left:0px' src='http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg' /> </div> <script type='text/javascript'> var os=document.getElementById('atr3').style; document.write( os.clip ); </script>

• 不同瀏覽器的輸出格式有不同。