inset()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

inset() は CSS の関数は、参照ボックスの各辺から指定された内側への距離に矩形を定義します。これは、 <basic-shape> データ型の一つを定義するために使用される基本図形関数です。

試してみましょう

clip-path: inset(30px);

clip-path: inset(1rem 2rem 3rem 4rem);

clip-path: inset(20% 30% round 20px);

clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #fe9;
}

#example-element {
  background: linear-gradient(to bottom right, #f52, #05f);
  width: 100%;
  height: 100%;
}

構文

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 一括指定の構文を使用して内部の矩形の角の丸みを定義します。