clipプロパティは、ボックスを切り抜き表示（クリッピング）する際に使用します。
CSS2の仕様で指定できる切り抜きの形状は矩形のみです。
矩形の指定方法について、CSS2の仕様では「ボックスの四辺の端から内側への距離」を指定することになっていますが、
CSS2.1では「ボックスの上辺と左辺を基準とした距離」と改定されています。
一般的なブラウザではCSS2.1の仕様に準拠しています。
また、CSS2.1ではclipプロパティの適用要素が「絶対配置された要素」と改定されており、
一般的なブラウザでclipプロパティによる切り抜き表示を有効にするには、
clipプロパティと同時にpositionプロパティでabsoluteかfixedを指定する必要があります。
Internet Explorer7以下では、カンマ（,）区切りではなく半角スペース区切りで値を指定しないと切り抜きされないようです。
div.sample {height:200px;}
img.sample1 {clip:rect(60px,150px,130px,40px); position:absolute;}
img.sample2 {clip:rect(60px 150px 130px 40px); position:absolute;}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<div class=”sample”>
元の画像<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/kaeru.gif”>
</div>
<div class=”sample”>
画像を切り抜き表示します。（カンマ区切りで指定）<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/kaeru.gif” class=”sample1″>
</div>
<div class=”sample”>
画像を切り抜き表示します。（スペース区切りで指定）<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/kaeru.gif” class=”sample2″>
</div>
</body>
</html>
