clip プロパティ
clip プロパティは、エレメントの表示領域を指定するプロパティです。
画像などの一部を切り取ったような表現ができます。画像の一部を拡大表示するといった表現にも応用できます。
clip プロパティは、エレメントが絶対位置 position:absolute; または position:fixed; でなければなりません。
元の大きさを width、height プロパティで指定しておきます。大きさとしては rect(top, right, bottom, left) というように領域で指定します。
エレメントが overflow：visible; では clip プロパティは機能しません。
position: absolute;
width: 200px;
height: 200px;
clip: rect( 0px, 150px, 200px, 0px );
＊clip プロパティは非推奨で、将来的には clip-path プロパティに置き換えられます。
ページ内 Index
構文(Syntax)
CSS
clip: auto | rect(top,right,bottom,left) | initial | inherit ;
DOM ( JavaScript )
String = object.style.clip;
object.style.clip=" auto | rect(top,right,bottom,left) | initial | inherit ";
値（Values）
| Value | 摘要 |
|---|---|
| auto | 初期値（default値）、元の大きさで表示 |
| rect(top,right,bottom,left) | 範囲を数値で設定 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | auto |
| 継承（Inherited） | no |
| 変化（Animatable） | yes |
Example
clipの例です。
左側はclip プロパティを設定しない場合の表示です。
右側はclip プロパティを設定した場合の表示です。
エレメントを position:absolute; または position:fixed; の絶対位置に、width、heightプロパティで大きさを指定しておく必要があります。
clip プロパティは、赤い border 線が見えていないことからエレメントの一部を表示していることが分かります。