box-shadowは重ねがけできる（追いbox-shadow）

表題の通りでそれ以上の情報はないんだけど。

このまえ作ったページ で、ふわっとした感じを出したくて box-shadow を使って、こんなかんじで表示させた。↓

当初 box-shadow を一度だけかけたのだが、かかり方が弱い（わかりやすいように背景を黒くしている）。

そういえば box-shadow って二重以上設定できたな〜と思い、こういう感じで重ねた。僕はこれを、追い box-shadow と勝手に呼んでいる。

.example {
box-shadow: 0 0 30px #6fba2c,
            0 0 40px #6fba2c,
            0 0 50px #6fba2c,
            0 0 60px #6fba2c;
}

設定後はこんなかんじ。

background-colorの角が見えちゃってるけど、まあ下半分は本番では隠れる場所だし、さっきよりはマシになったから、まあいいか.... と思ってこのままにした。

……と思っていたのだが、いま9回重ねてシャドウかけたところようやく自然な雰囲気になった。助かった。 ↓

最近のっぺりしたページ作ることが多くて box-shadow 使う機会が減っているから、知見があまり更新されない状況だった。たまにふわふわさせたいのでふわふわ感を出したいときに使うことにする。