CSS Reference

inset()

CSS で参照ボックスの内側に矩形を描く

inset() 関数は、基本シェイプ関数と呼ばれる CSS 関数で、CSS を利用して参照ボックスの各辺から指定された内側への距離に矩形（それぞれの角が直角である四辺形）を描くことに利用できます。

基本シェイプ関数の値となる <basic-shape> データ型は、clip-path、shape-outside、offset-path の各プロパティで使用されます。

inset() 関数をはじめ、基本シェイプ関数には下記のようなものが挙げられます。

これらの CSS 関数を使って、CSS で図形を簡単に定義することが可能です。

詳細説明

inset() 関数の基本的な構文は下記のようになります。

<inset()> = inset(
  <length-percentage>{1,4}
  [ round <'border-radius'> ]?
)

よって、1 ～ 4つの <length> もしくは <percentage> 値を指定し、任意で、round に続けて <border-radius> を指定可能ということになります。

最初に指定した 1 ～ 4つの <length> もしくは <percentage> 値は、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部に描く矩形の辺の位置を定義します。記述方法としては、margin プロパティや padding プロパティの一括指定と同様です。

<border-radius> は、border-radius プロパティで指定可能な値となります。つまり、1 ～ 4つの <length> もしくは <percentage> 値を指定し、任意で、/ に続けて 1 ～ 4つの <length> もしくは <percentage> 値を指定可能です。

<border-radius> の指定によって、描いた四辺形の角の丸みを指定できます。

inset()のサンプルソース

.example01 {
  clip-path: inset(30px);
  background: linear-gradient(to bottom right,#f52,#05f);
  width: 100%;
  height: 100%;
}
.example02 {
  clip-path: inset(1rem 2rem 3rem 4rem);
  background: linear-gradient(to bottom right,#f52,#05f);
  width: 100%;
  height: 100%;
}
.example03 {
  clip-path: inset(20% 30% round 20px);
  background: linear-gradient(to bottom right,#f52,#05f);
  width: 100%;
  height: 100%;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome