メインコンテンツへスキップ

BoxShadowValue オブジェクト型

boxShadow スタイルプロパティでは、BoxShadowValue オブジェクトが使用されます。これは、2～4つの長さ、オプションの色、およびオプションのinsetブール値で構成されます。これらの値は、ボックスシャドウの色、位置、サイズ、ぼかしをまとめて定義します。

例​

js
{
  offsetX: 10,
  offsetY: -3,
  blurRadius: '15px',
  spreadDistance: '10px',
  color: 'red',
  inset: true,
}

キーと値​

offsetX​

x軸上のオフセットです。正の値でも負の値でも構いません。正の値は右、負の値は左を示します。

型任意
number | stringNo

offsetY​

y軸上のオフセットです。正の値でも負の値でも構いません。正の値は上、負の値は下を示します。

型任意
number | stringNo

blurRadius​

ガウスぼかしアルゴリズムで使用される半径を表します。値が大きいほど、シャドウはぼやけます。非負の値のみが有効です。デフォルトは0です。

型任意
number | stringはい

spreadDistance​

シャドウがどれだけ拡大または縮小するかです。正の値はシャドウを拡大し、負の値はシャドウを縮小します。

型任意
number | stringはい

color​

シャドウの色です。デフォルトはblackです。

型任意
colorはい

inset​

シャドウがインセットであるかどうかです。インセットシャドウは、要素のボーダーボックスの外側ではなく、内側に表示されます。

型任意
booleanはい

使用元​