clip
Deprecated
Avoid using this feature in new projects.
The CSS Masking specification deprecated the clip property.
This feature may be a candidate for removal from web standards or browsers.
Consider using the following features instead: clip-path.
警告:
作成者は、代わりに clip-path プロパティを使用することをお勧めします。
clip は CSS のプロパティで、要素のどの部分が可視であるかを定義します。 clip プロパティは絶対配置された要素、つまり position:absolute または position:fixed を持つ要素だけに適用されます。
構文
/* キーワード値 */
clip: auto;
/* <shape> 値 */
clip: rect(1px, 10em, 3rem, 2ch);
/* グローバル値 */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;
値
rect()-
rect()関数を使用して、rect(<top>, <right>, <bottom>, <left>)の形で定義された長方形。<top>と<bottom>は、ボックス境界の上辺からのオフセットを表します。<right>と<left>は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。<top>、<right>、<bottom>、<left>の値は<length>またはautoのいずれかです。autoが指定されると、その辺の境界線の内側で切り取られます。
メモ:
非推奨の clip プロパティで使用される <shape> 関数の rect() は、 CSS で <basic-shape> を定義するために使用する CSS の rect() 関数とは異なります。
auto-
要素はクリップされません（既定値）。ボックス境界で切り取る
rect(auto, auto, auto, auto)とはまったく異なることに注意してください。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | 絶対位置指定された要素 |
| 継承 | なし |
| 計算値 | auto が指定されていれば auto、それ以外は 4 つの値をともなう矩形。矩形の場合、各値は auto が指定されていれば auto、それ以外では長さの計算値 |
| アニメーションの種類 | rectangle |
形式文法
clip =
<rect()> |
auto
<rect()> =
rect( <top> , <right> , <bottom> , <left> )
例
画像のクリップ
<p class="dotted-border">
<img src="macarons.png" alt="Original graphic" />
<img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
<img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
<img
id="bottom-right"
src="macarons.png"
alt="Graphic clipped to bottom right" />
</p>
.dotted-border {
border: dotted;
position: relative;
width: 390px;
height: 400px;
}
#top-left,
#middle,
#bottom-right {
position: absolute;
top: 0;
}
#top-left {
left: 400px;
clip: rect(0, 130px, 90px, 0);
}
#middle {
left: 270px;
clip: rect(100px, 260px, 190px, 130px);
}
#bottom-right {
left: 140px;
clip: rect(200px, 390px, 290px, 260px);
}
仕様書
| 仕様書 |
|---|
| CSS Masking Module Level 1 # propdef-clip |