`box-shadow` 箱に影を付ける

重要度3 / 5

意味

カードやボタンを、背景から少し浮かせたいときに使います。値は「右へ、下へ、ぼかし、色」の順です。ぼかしを大きくするほど、影は薄く広がります。

線の代わりに影だけで境界を作ると、背景色によっては境目が見えにくくなります。境界が必要なときは border と役割を分けます。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="card">影だけで、背景から浮いて見えます。</div>

CSS

.card {
  background: #fff;
  padding: 0.75rem 1rem;
  box-shadow: 0 8px 24px rgb(22 21 19 / 12%);
}

プレビュー

出典: MDN Web Docs（`@mdn/browser-compat-data`）