ドロップシャドーの実装について

Question

実現したいこと

ドロップシャドーをアイコン部分にCSSで実装したいです。

前提

HTMLはこのように記述しています。

        <div class="contact-text-list">
          <i class="contact-box fa fa-sharp fa-regular fa-square"></i>
          <p class="contact-text">●●●●●●</p>
        </div>

試したこと

CSSにこのようにコードを記述していたのですが、
大きくぼやけてしまいました。
もっとはっきりとドロップシャドーを実装したいです。

.contact-box{
  color: #000;
  font-size: 1.125rem;
  filter: drop-shadow(0.1rem 0.1rem 0.5rem #000);
}

ご回答をよろしくお願いいたします。

Comments

[int32_t]

問題を再現できるだけの情報を開示してください。fa fa-sharp fa-regular fa-square などのクラスのスタイルが不明です。

Answer 1

drop-shadow関数の引数は(offset-x offset-y blur-radius color)です。
影をぼかす半径の設定は引数の blur-radius で行いますので、この値を調整されてはいかがですか。
CSSの書き方が分からない時は、まずはMDNなどで確認することをお勧めします。
drop-shadow() - CSS: カスケーディングスタイルシート | MDN

Comments

[nakamina]

いただいたリンクを参考に数値の調整をしたところ問題を解決できました。ありがとうございました。