- Published on
連續記錄挑戰Day14-10-Cloaked Spirits
- Authors
- Name
- Penghua Chen(PH)
Target #10- Cloaked Spirits
撰寫思維
圖形組合的思考參考示意圖,如下:
區分為1、2、3的區塊 + a、b、c 三個圓形的部分
使用flex語法做區塊的水平置中及垂直方向置底
設定border-radius滿足1、2、3區塊的圓角設定
設定a、b、c 三個圓形的部分
最後結果
附上 codepen(CSSBattle 目前無法透過附上連結看到別人所寫的程式碼,所以我另外寫在 codepen 方便點擊。可直接複製貼上即可查看結果)
這一關嘗試使用了 nth-of-type的語法做設定,但在闖關的過程中因為觀念的不清楚,所以和 nth-child的語法有搞混,於是決定要寫一篇關於上述語法差異性的筆記。
待記錄完後,在將該筆記連結補充至此。