是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！
那麼我們這次從 #107 的問題來提供我的作法，那麼題目圖如下：
封印解除XD
- 會考慮用一個 wrapper 將整個圓形圖案置中，那我會比較習慣使用
grid來處理。 - 頭和眼睛的部分我們可以把它想成同心圓的蓋念，利用圖層堆疊的原理來組合出圖案，可以想像成紅色環形上面蓋上一個白色環形加上羽毛的圖層。
- 嘴巴和頸部可以把它想成長條形的色塊，利用
border-radius去調整呈現的形狀。 - 最後透過
translate與z-index來調整顯示的位置。
下面的 html 是按照上述所描述的產出
<div class="wrapper">
<div class="ring">
<div id="top" class="wing"></div>
<div id="mid" class="wing"></div>
<div id="last" class="wing"></div>
</div>
<div class="mouth"></div>
<div class="neck"></div>
<div class="stick"></div>
</div>
這邊會透過 id 的方式去調整那三個羽毛的長短以及相對位移位置，那麼我們先來處理外層和 wrapper 的部分：
body {
margin: 0;
display: grid;
place-items: center;
background: #161616;
}
.wrapper {
width: 20px;
height: 20px;
border-radius: 50%;
border: 20px solid #A22015;
position: relative;
}
這裡會將 wrapper 調整成 position: relative; 主要是方便後面調整其他色塊匡時有比較直覺的參照點，接下來我們來處理白色環形和羽毛的部分：
.ring {
width: 30px;
height: 30px;
border-radius: 50%;
border: 10px solid #FFFFFF;
translate: -15px -15px;
position: relative;
}
.wing {
height: 12px;
background: #FFFFFF;
position: absolute;
border-radius: 0 0 0 50px;
}
#top {
width: 55px;
translate: -55px -3px;
}
#mid {
width: 40px;
translate: -40px 9px;
}
#last {
width: 25px;
translate: -25px 21px;
}
這個部分可以透過平台的工具去計算寬度，位移的話會依照上面一層的 content 位置去長內層的內容，也就是說我如果要讓圓心重疊，那麼我就必需位移半徑長度的位置，算是一個計算上的小技巧，可以縮短你來回使用工具的時間。
羽毛的計算就比較土法煉鋼，除了高度以外(可以利用已知的高度計算)，剩下還得靠工具輔助。
上面處理完之後，剩下的色塊就相較容易許多，使用方法如下：
.mouth {
width: 70px;
height: 40px;
background: #E96A23;
position: absolute;
translate: 20px -61px;
border-radius: 0 40px 5px 0;
z-index: -1;
}
.neck {
width: 30px;
height: 30px;
background: #A22015;
border-radius: 0 0 10px 10px;
translate: -5px -17px;
position: absolute;
z-index: -1;
}
.stick {
width:20px;
height:200px;
background: #E96A23;
position: absolute;
z-index: -2;
}
基本上還得靠點經驗才做得快一點，尤其是對於 border-radius 大小的判斷，剩下的操作和前面基本上是大同小異，最後再調整一下 z-index 就能完成了。
技術總結
這題主要考的應該就是圖層堆疊的使用，有部分是關於圖形解構的能力，如果 position 沒有定位好的話，可能會花很多時間在調整位移，再來就是對 border-radius 的熟悉度，有經驗的話應該猜的到大概是多少大小，但如果面試真的遇到這類題目，要有心理準備會花比較長的時間來處理位移定位，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !
