Help us understand the problem. What is going on with this article?

HTML の ボックス要素 に 影 を 設定する

More than 1 year has passed since last update.

目的

  • HTMLファイルのボックス要素に影を設定する方法をまとめる。

押さえるポイント

  • ボックス要素に影を設定するにはbox-shadowプロパティを使用する。
  • box-shadowプロパティに水平方向への影のピクセル数、垂直方向への影のピクセル数、影の色を与える。
  • 影の色はカラーコードで設定する。

書き方の例

  • 下記にCSSファイルの内容を記載する。
ボックス要素の名前かクラス名 {
  box-shadow: 水平方向の影のピクセル数 垂直方向の影のピクセル数 影の色;
}

より具体的な例

  • h1要素に垂直方向に10pxの黒い影を設定する。
  • HTMLファイルの内容を下記に記載する。
<h1>おはようございます。</h1>
  • 下記にCSSファイルの内容を記載する。
h1 {
  box-shadow: 0 10px black;
}

p {
  font-weight: boid;
}
miriwo
web系のバックエンドの知識を習得中! 2019/07/07~毎日更新中
https://miriwo.hatenablog.com/
boomtechcafe
埼玉県の朝霞台を拠点にエンジニアの勉強会、交流会等のイベントを企画しています! 朝霞台駅か北朝霞駅が全然行けちゃうぜってエンジニアの方がいたら是非! もくもく会とかゲーム大会とかもやれたらな~って思ってます。
https://boom-teck-cafe.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away