inset()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
inset() は CSS の関数は、参照ボックスの各辺から指定された内側への距離に矩形を定義します。これは、 <basic-shape> データ型の一つを定義するために使用される基本図形関数です。
試してみましょう
構文
css
shape-outside: inset(20px 50px 10px 0 round 50px);
値
<length-percentage>{1,4}-
4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。
<border-radius>-
オプションの
<border-radius>引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。
例
基本的な内側の矩形の例
下記の例では、浮動要素の上にコンテンツを引き寄せるために、 inset() のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。
仕様書
| Specification |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-inset |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このデータ型を使用するプロパティ:
clip-path,shape-outside - CSS シェイプ モジュール
- 基本シェイプのガイド