是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！
那麼我們這次從 #167 的問題來提供我的作法，那麼題目圖如下：
我的解題思維
- 一樣先想辦法置中圖面。
- 所見即所得，大致將藍色的原子中心與外面堆疊的橢圓形環做分類。
- 堆疊的部分可以考慮使用 absolute 的方式做旋轉堆疊。
- 從圖可知紅色環應該要在最上面，白色環應該要在最下面。
下面的 html 是按照上述幾個要點的結構
<div class="c"></div>
<div class="ring"></div>
<div id="green" class="ring" ></div>
<div id="red" class="ring"></div>
首先的置中這件事我是採用 gird 的方法處理，原因是最短，當然大家可以按照自己喜好去做即可：
body {
display: grid;
place-items: center;
background: #0D1335;
margin:0;
}
接著，我們來處理中心點的藍色圓圈：
.c {
width: 40px;
height: 40px;
background: #73C6EA;
border-radius: 50%;
}
然後，我們處理環形圈的部分，這裡我考慮用id 的方式去抓取紅色與綠色環的微調，當然也可以考慮使用同為 class 的方式去處理，會這麼做的原因就是讓大家一目瞭然：
.ring {
width: 230px;
height: 90px;
border: 10px solid #FBFAE2;
border-radius: 50%;
position: absolute;
}
#green {
rotate: -60deg;
border-color: #4FA07B;
}
#red {
rotate: 60deg;
border-color: #DC6638;
}
上面就是我個人的淺見解法啦！這題除了考驗怎麼解構圖案之外，也要熟用 rotate 及理解 absolute 之後上下堆疊的順序，這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !
