cssのclipについて

https://developer.mozilla.org/ja/docs/Web/CSS/clip
上記URLに出てくる
clip: rect(1px, 10em, 3rem, 2ch);

上記は、どのような意味でしょうか。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2022/12/17 17:49

こんばんは

ご提示のページの説明文の「値」のところに解説にある通りです。

------ここから------
rect(<top>, <right>, <bottom>, <left>) 形式の矩形の <shape> です。 <top> と <bottom> は、ボックス境界の上辺からのオフセットを表します。<right> と <left> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。
------ここまで------

＞clip: rect(1px, 10em, 3rem, 2ch);
は、境界から上右下左の順に、1px, 10em, 3rem, 2ch の長さ分をトリミングして切り抜くという意味です。
単位がいろいろ使われていますが、それぞれ
　px:ピクセル
　em：親要素のフォントサイズ1文字分
　rem:ルート要素のフォントサイズ1文字分
　ch:その要素のフォントの 「0」 の幅
を単位とする長さを意味します。