星期三的CSS-CSSBattle#73

是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！

很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！

回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！

那麼我們這次從 #73 的問題來提供我的作法，那麼題目圖如下：

我的思維邏輯

1. 這次圖面稍微複雜一點，要用一點圖層堆疊的概念進行解構，我會先將耳朵與臉的部分做初步的分類。
2. 我會考慮使用 grid 的方式來做底圖的排版，分別會是左耳、右耳與臉的三個主要的大項，然後臉的部分會透過 grid 的 span 2 來佔滿格數。
3. 臉的部分也會分成三塊，分別是上面三角形的紋路、中間兩個眼睛及嘴巴（包含鼻字線條的白色部分）。

下面的 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~ !