Target #10- Cloaked Spirits

撰寫思維

• 圖形組合的思考參考示意圖，如下:

  區分為1、2、3的區塊 ＋ a、b、c 三個圓形的部分

• 使用flex語法做區塊的水平置中及垂直方向置底

• 設定border-radius滿足1、2、3區塊的圓角設定

• 設定a、b、c 三個圓形的部分

最後結果

附上 codepen(CSSBattle 目前無法透過附上連結看到別人所寫的程式碼，所以我另外寫在 codepen 方便點擊。可直接複製貼上即可查看結果)

#10 Cloaked Spirits

這一關嘗試使用了 nth-of-type的語法做設定，但在闖關的過程中因為觀念的不清楚，所以和 nth-child的語法有搞混，於是決定要寫一篇關於上述語法差異性的筆記。

待記錄完後，在將該筆記連結補充至此。