今天要帶給大家的是 box-shadow，是很輕鬆的小單元，Let's go

我們可以透過 shadow- 或 shadow-none，使用或不使用 box-shadow：

      <ul
        class="m-12 text-center transition-all duration-500 border border-transparent rounded shadow-xl hover:border-white w-80 h-80 group"
      >
        <li class="p-4 text-3xl">
          <i
            class="text-white transition-all duration-500 group-hover:text-green-400 fa-solid fa-rocket"
          ></i>
        </li>
        <li class="p-4">
          <p
            class="text-justify text-white transition-all duration-500 group-hover:text-red-300"
          >
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum nihil
            doloremque quaerat harum quas itaque nulla numquam ut nobis natus
            quam molestias eos deserunt eius soluta, debitis commodi eaque
            perspiciatis.
          </p>
        </li>
      </ul>

範例程式碼使用上次的範例追加 shadow-xl 樣式，圖上看起來沒有 box-shadow 只是因為我們背景採用 bg-black，如果想換 box-shadow 顏色的話，是跟文字或背景一樣的方式指定，這邊以綠色為例 (shadow-green-300)。

除了外部陰影，也可使用在 box 內，僅需將 shadow-xl 換成 shadow-inner

想要加上 hover effect 的話，僅須添加在顏色樣式 (hover:shadow-green-300)

一如往常，box-shadow 也是可以進行客製化的，同樣可以依照 css 樣式的寫法寫上陰影偏移距離、模糊範圍 (blur)、濺射大小 (spread)以及顏色。

今天介紹就到這邊，謝謝大家