このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
要素に影を追加するには
このガイドでは、ページ上の任意のボックスに影を追加する方法を紹介します。
ボックスに影を追加
影は、ページ上で要素を目立たせるために役立つ、一般的なデザイン機能です。CSS では、要素のボックスの影はbox-shadow プロパティを使用して作成します（テキスト自体に影を追加したい場合はtext-shadow が必要です）。
box-shadow プロパティは、いくつかの値を取ります。
- X 軸上のオフセット
- Y 軸上のオフセット
- ぼかし半径
- 拡散半径
- 色
insetキーワード
下記例では、X 軸と Y 軸を 5px、ぼかしを 10px、広がりを 2px に設定しています。色として半透明の黒を使用しています。異なる値でシャドウがどのように変わるか、試してみてください。
html
<div> <button>box-shadow</button></div>.wrapper { height: 150px; display: flex; align-items: center; justify-content: center;}button { padding: 5px 10px; border: 0; border-radius: 5px; font-weight: bold; font-size: 140%; background-color: #db1f48; color: #fff;}css
.shadow { box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);}メモ:この例ではinset を使用していません。これは、シャドウが既定のドロップシャドウであり、シャドウの上にボックスがあることを意味しています。インセットシャドウは、コンテンツがページに押し込まれているかのように、ボックスの内側に現れます。