<css>box-shadowが反映されない時の対処法

こんにちは、おーしまです。

今回は、cssで要素に影を作る、box-shadowが反映されない時の対処法について、書いていきます。

まず、box-shadowの使い方から説明しますと、

.content{
  box-shadow: 左右の向きpx  上下の向きpx ぼかしpx 広がりpx 色 内側指定;
}

という感じです。
左右の向きは、「0」は影無し、「3px」で右方向に3pxの影、「-3px」で左方向に3pxの影という方に、プラスマイナス〜pxで調整します。上下の向きも同じく、「0」が影無し、プラスが下、マイナスが上という風になります。どちらも「0」に設定した場合は、上下左右全てに影ができます。
ぼかしも、pxで記述します。ぼかし具合は色々試してみて、決めるのが良いでしょう。
広がりは、「0」だと要素と同じ大きさの影ができます。これもプラスマイナスpxで要素に対しての、影の大きさを決めることができます。
色は、影の色です。
内側指定は、insetと記述することで、要素の内側に影を作ることができます。

左右の向きと上下の向き以外は、こだわりがなければ、省略することができます。

それでは、本題です。

      <div class='aaa'>
        <div class='bbb'></div>
        <div class='ccc'></div>
      </div>

.aaa{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bbb{
  height: 100px;
  width: 100px;
  box-shadow: 10px 10px 5px gray;
  background-color: blue;
}

.ccc{
  height: 100px;
  width: 100px;
  background-color: green;
}

子要素が上のように、くっついて存在しているときは、影が表示されません。（青色の要素の右の影が、緑色の要素と重なって表示されてない）そういうときは、影をつけている要素に

.bbb{
  height: 100px;
  width: 100px;
  box-shadow: 10px 10px 5px gray;
  background-color: blue;
  position: relative;
}

position: relative; を指定すれば、子要素の上に影を作ることができます。

今回はここまでです。
それでは、また