【CSS】 要素の「内側」に「影」を付ける方法

こんにちは、さちです。

今回は「CSS」で、要素の内側に「影（box-shadow）」を付ける方法について書いていきます。

実装方法

表示結果

あと 57 日

<div>
  あと
  <span class="dent">5</span>
  <span class="dent">7</span>
  日
</div>

下記の CSS は、見やすいよう解説に必要な部分以外の記述を省略しています。

.dent {
  box-shadow: inset 2px 1px 7px rgb(5, 10, 5);
}

以前の記事で紹介した要素に「影」を付けるプロパティ box-shadow ですが、inset を付けることで要素の「内側」に影を付けられます。

記述の形式は下記のとおり、基本的に「外側」に影を付けるときと同じです。

box-shadow: inset 横方向の位置 縦方向の位置 [ぼかしの強さ] [拡張する量] [影の色];