是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番!
很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧!
回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題目,也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔!
封印解除XD
grid
來處理。border-radius
去調整呈現的形狀。translate
與 z-index
來調整顯示的位置。<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~ !