Jul.27th,2021
＃
“drop-shadow()”関数
“drop-shadow()”関数は入力画像にドロップ・シャドウ効果を適用する関数です。
入力画像のぼかしたアルファ・マスクを“drop-shadow()”関数で指定された位置に指定された色で画像の下に影のように混合します。
“<filter-function>”値として使用することができ、“filter”プロパティで要素から影を落とすことができます。
＃
“drop-shadow()”関数の構文
“drop-shadow()”関数の引数は任意の“<color>”値と複数の“<length>”値の組み合わせです。それぞれの値はホワイトスペースで区切って記述します。
“<length>”値
“<length>”値は2個もしくは3個指定できます。
“<length>”値は少なくとも2個指定する必要があります。“<length>”値が2個の場合には省略されたもう1個の値は“0”として扱われます。
2個の“<length>”値
“<length>”値が2個の場合、1個目の値は影の垂直方向のオフセット距離、2個目の値は影の水平方向のオフセット距離を指定します。正の値と負の値のどちらでも指定できます。水平方向の距離は正の値の場合は右方向、負の値の場合は左方向へ影が移動します。垂直方向の距離は正の値の場合は下方向、負の値の場合は上方向へ影が移動します。
drop-shadow( 〚垂直方向のオフセット〛 〚水平方向のオフセット〛)
3個の“<length>”値
“<length>”値が3個の場合、1個目と2個目の値は2個の場合と同様で、3個目の値は影の標準偏差を指定します。“0”以上の値のみ指定でき、値が大きいほど影のぼかしが強くなります。“0”とした場合はぼかしがなく、影の縁ははっきりします。
drop-shadow( 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚標準偏差〛;
“<color>”値
“<color>”値は影の色を指定します。“<color>”値を省略した場合はその要素の“color”プロパティの値が使用されます。
drop-shadow(〚色〛 〚垂直方向のオフセット〛 〚水平方向のオフセット〛 〚標準偏差〛;
＃
使用例
.filter-1 { filter: drop-shadow(0 0);}
.filter-2 { filter: drop-shadow(10px 10px);}
.filter-3 { filter: drop-shadow(10px 10px 10px);}
.filter-4 { filter: drop-shadow(-10px 10px 10px);}
.filter-5 { filter: drop-shadow(-10px -10px 10px);}
.filter-6 { filter: drop-shadow(10px 10px 10px #d7003a);} /* ■ */
drop-shadow(0 0)
drop-shadow(10px 10px)
drop-shadow(10px 10px 10px)
drop-shadow(-10px 10px 10px)
drop-shadow(-10px -10px 10px)
drop-shadow(10px 10px 10px #d7003a)
＃
