備忘録的プログラミングリファレンス

drop-shadow() メソッド

 drop-shadow() メソッドは、影を作成するための値を返す CSS メソッドです。エレメントや内容に影を加えることができます。
 影は、向きとぼかし具合、色が引数で指定できます。

drop-shadow() メソッド
filter: drop-shadow( 10px 10px 6px gray );

詳しくは Example を参照してください

 drop-shadow() メソッドは、filter プロパティといった <filter-value-list> を使用するプロパティで利用します。
 backdrop-filter では効果はないです。

 エレメントの枠に影を付けたいだけならば box-shadow プロパティを使用する方法もあります。

ページ内 Index

構文(Syntax)

CSS

drop-shadow( offsetX offsetY blur color );

引数

 引数は、CSS の長さです。

Example

 drop-shadow() メソッドの例です。filter プロパティで drop-shadow() メソッドを使用しています。
 内容とみなされるものには全て影が付きます。

 backdrop-filter プロパティとの組み合わせでは効果はないようです。