星期三的CSS-CSSBattle#16

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

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

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

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

1. 這次是類似伊姆眼睛的圖案，會透過一個 wrapper 來組為眼睛外行的包覆。
2. 內層眼球的部分會去測量瞳孔位置的大小，再透過 border & outline 長出對應的環狀色塊。
3. 這邊的置中處理我都會以 grid 的方式來處理。

下面的 html 是按照上述所描述的產出

<div class="wrapper">
  <div class="center"></div>
</div>

然後接著處理CSS的部分，如下：

body {
    margin: 0;
    display: grid;
    place-items: center;
    background: #0B2429;
}
.wrapper {
    width: 200px;
    height: 200px;
    background: #dd6b4d;
    rotate: 45deg;
    border-radius: 50% 0;
    background: #998235;
    display: grid;
    place-items: center;
}
.center {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #0B2429;
    border: 45px solid #F3AC3C;
    outline: 20px solid #0B2429;
}

這邊我是有算過剛好 border + outline 就足夠可以產出圖面了，如果今天變成輪迴眼的話可能就要考慮多加 tag 來長出紋路了。

技術總結

這次的圖形比較簡單，主要熟悉 border-radius & border 的調整，就可以大幅縮短排版的時間，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !