星期三的CSS-CSSBattle#73
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！
那麼我們這次從 #73 的問題來提供我的作法，那麼題目圖如下：
我的思維邏輯
- 這次圖面稍微複雜一點，要用一點圖層堆疊的概念進行解構，我會先將耳朵與臉的部分做初步的分類。
- 我會考慮使用
grid的方式來做底圖的排版，分別會是左耳、右耳與臉的三個主要的大項，然後臉的部分會透過grid的span 2來佔滿格數。 - 臉的部分也會分成三塊，分別是上面三角形的紋路、中間兩個眼睛及嘴巴（包含鼻字線條的白色部分）。
下面的 html 是按照上述幾個要點的結構
<div class="ear"></div>
<div class="ear"></div>
<div class="face">
<div class="stripe"></div>
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="mouth">
<div class="nose"></div>
</div>
</div>
雖說複雜但透過上述的初步規劃，應該還是蠻容易理解的吧！那我們一樣先處理 body 的部分：
body {
margin: 0;
display: grid;
place-items: center;
place-content: center;
background: #F3AC3C;
grid-template: 0px 110px / 110px 110px;
}
.ear {
width: 40px;
height: 40px;
background: #1A4341;
border-radius: 50%;
border: 10px solid #998235;
}
.face {
width: 150px;
height: 150px;
background: #998235;
border-radius: 50% 50% 60px 60px;
grid-column: span 2;
overflow: hidden;
}
置中的處理我就不再贅述了，這次多加了一個 place-content: center; 主要是想讓每個網格裡的內容都往中間靠攏，至於 grid-template 後面的參數，可以透過預覽定位點慢慢微調找出來，包含臉部的輪廓 border-radius 的參數也是一樣，沒錯，每個調整都是試出來的，我們還是工程師，沒有通靈能力，也不會觀落陰。
做完上述的調整，我們開始來畫臉部的細節，如下：
.stripe {
width: 40px;
height: 40px;
background: #1A4341;
rotate: 45deg;
translate: 0px -23px;
margin: 0 auto;
}
.eyes {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px 0 25px;
}
.eye {
background: #1A4341;
width: 20px;
height: 20px;
border-radius: 50%;
}
.mouth {
background: #FFFFFF;
height: 40px;
width: 100px;
border-radius: 20px 20px 50px 50px;
margin: 15px auto;
}
.nose {
background: #1A4341;
height: 30px;
width: 10px;
margin: 0 auto;
translate: 0 -10px;
}
.nose:before {
content: "";
display: block;
width: 20px;
height: 10px;
border: 10px solid #1A4341;
border-radius: 0px 0px 20px 20px;
border-top: 0px;
translate: -30px 20px;
}
.nose:after {
content: "";
display: block;
width: 20px;
height: 10px;
border: 10px solid #1A4341;
border-radius: 0px 0px 20px 20px;
border-top: 0px;
}
我就沒有再分段落貼CSS了，但原則上還是從上而下依序處理，最上面三角形的紋路我是透過旋轉和位移的方法來達成的。
眼睛的話可以分享一個小訣竅，在調整 padding 的時候我會多賦予它一個background 顏色，這樣會比較好確認訂位的參數。
鼻子線條的部分我是透過 before & after 的方式去加上綴飾線條，這部分就比較看個人，有的開發者習慣在拆的更多 span 去做組合也是可以。
技術總結
這題比起之前題目來的複雜許多，我提供的方法會比較偏向常用排版的延伸，主要也是希望能在日後的工作情境中使用，如果全部都用 position: absolute; 的方式來微調，一定也是可以達到 100%，但是我相信用這種方式處理的話，一般還是會直接請 UI 出張圖，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !
你可能也想看
