BoxShadowValue オブジェクト型

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

使用例

js

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

キーと値

offsetX

x軸上のオフセット。正または負の値を指定できます。正の値は右を、負の値は左を示します。

型	任意
number | string	いいえ

offsetY

y軸上のオフセット。正または負の値を指定できます。正の値は上を、負の値は下を示します。

型	任意
number | string	いいえ

blurRadius

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

型	任意
numer | string	はい

spreadDistance

影がどれだけ拡大または縮小するか。正の値は影を拡大し、負の値は影を縮小します。

型	任意
numer | string	はい

color

影の色。デフォルトは black です。

型	任意
color	はい

inset

影を内側に描画するかどうか。内側の影は、要素の境界ボックスの外側ではなく、内側に表示されます。

型	任意
boolean	はい

使用箇所

• boxShadow