drop-shadow()
drop-shadow()
は CSS の関数で、入力画像にドロップシャドウ効果を適用します。結果は <filter-function>
です。
試してみましょう
ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。
メモ: この関数はいくらか box-shadow
プロパティと似ています。 box-shadow
プロパティは要素のボックス全体の背後に長方形の影を作成しますが、 drop-shadow()
フィルター関数は画像自体の形 (アルファチャネル) に合った影を作成します。
構文
css
drop-shadow(offset-x offset-y blur-radius color)
drop-shadow()
関数は <shadow>
型の引数 (box-shadow
プロパティで定義) を受け付けますが、 inset
キーワードと spread
引数が許可されないという例外があります。
引数
offset-x
offset-y
(必須)-
影のオフセットを指定する 2 つの
<length>
値です。offset-x
は水平方向の距離を表し、負の数で影を要素の左方に配置します。offset-y
は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も0
であれば、影は要素の真後ろに配置されます。 blur-radius
(任意)-
影をぼかす半径で、
<length>
で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の0
になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。 color
(任意)
例
ピクセル単位のオフセットとぼかし半径を用いたドロップシャドウの設定
css
/* 10px のぼかしで広がりのない黒い影 */
drop-shadow(16px 16px 10px black)
rem 単位ののオフセットとぼかし半径を用いたドロップシャドウの設定
css
/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */
drop-shadow(.5rem .5rem 1rem #e23)
仕様書
Specification |
---|
Filter Effects Module Level 1 # funcdef-filter-drop-shadow |
ブラウザーの互換性
BCD tables only load in the browser