是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！
那麼我們這次從 #160 的問題來提供我的作法，那麼題目圖如下：
- 首先我們先將圖面置中，這邊我會考慮使用
gird的方式排版。 - 這邊我是考慮到實用性問題，所以很直覺的認為需要遮罩來處理紅色的區塊，但也是這一層思考會讓結構變得複雜一點。
- 黃色為基底，紅色站黃色的四分之一大小。
- 最內層再蓋上一個紫色圓形的色塊。
下面的 html 是按照上述所描述的產出
<div class="ring">
<div class="red"></div>
<div class="hole"></div>
</div>
最外面那層的 ring 會是整塊元件的包覆層，所以會在上面下 position: relative; 來做為內層紅色區塊的定位，css 的解法大致如下：
body {
margin: 0;
background: #62306D;
display: grid;
place-items: center;
}
.ring {
width: 200px;
height: 200px;
background: #F7EC7D;
border-radius: 50%;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
}
.hole {
width: 120px;
height: 120px;
border-radius: 50%;
background: #62306D;
z-index: 1;
}
.red {
width: 100px;
height: 100px;
position: absolute;
background: #E38F66;
top: 0;
left: 0;
}
以上就是我自己最初構想的解法，但如果這個情境是發生在面試階段的話，其實不需要考慮應用層面問題，可以直接改用 border 處理就能快速解出這個圖案了，解法如下：
<div></div>
<style>
body {
background: #62306D;
display: grid;
place-items: center;
}
div {
width: 120px;
height: 120px;
border: 40px solid #F7EC7D;
border-radius: 50%;
border-top-color: #E38F66;
rotate: -45deg;
}
</style>
技術總結
這題除了考驗圖層的堆疊應用以外，也考驗你對元件整合應用的概念，就如上述我所述的，多了一層遮罩，你能透過控制那個遮罩來更改覆蓋區域的大小，能擴大應用層面（ex: loading spin），但如果今天是在面試環節遇到這樣的問題，我還是建議用第二種思維來解題比較恰當，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !
