星期三的CSS-CSSBattle#153

Lee Luciano

更新於 2024/04/10發佈於 2024/04/10閱讀時間約 4 分鐘

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

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

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

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

首先我們先來思考處理西洋棋盤的部分，這邊我會考慮使用 gird 的方式排版。
除了中間那行以外，所有的粉色方格內都需要有圓形色塊。
我會在中間的那兩個粉色區塊下 class ，再透過 CSS 選擇器避開它。
圓形色塊的顯示我會考慮透過 :before 的方式顯示。

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

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="clear"></div>
<div></div>
<div class="clear"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

大概算一下 5 x 5 = 25，所以需要 25 個 div ，又在中間那行的偶數格處理，避開顯示黃色圓形色塊的 class，方便後續選擇器避開處理。

接著我們來處理 5 x 5 棋盤格的畫面，一樣透過 gird 的排版處理，先將方塊都生出來，如下：

body {
    background: #E3516E;
    display: grid;
    place-items: center;
    place-content: center;
    grid-template: repeat(5, 40px) / repeat(5, 40px);
}
div {
    width: 40px;
    height: 40px;
    background: #FADE8B;
}

這邊可以透過 cssBattle 的工具去計算格子的大小，然後如上述的 5 x 5 排版，並在 grid-template 裡面下 repeat 函數處理方格排版。

div:nth-child(even) {
    background: #E3516E;
    position: relative;
}
div:not(.clear):nth-child(even)::before {
    content: '';
    width: 20px;
    height: 20px;
    background: #FADE8B;
    position: absolute;
    border-radius: 50%;
    top: 10px;
    left: 10px;
}

這邊針對偶數格處理變色，使用了nth-child(even) 並加上 position: relative;，方便待會黃色圓形色塊定位；還有避開剛剛設定的 clear class，再加上上面相同的選擇條件，並透過::before 去長出圓形色塊。

技術總結

這題除了考驗基本的常用排版之外，也考驗你對元件選擇器的使用，就如上述我所做的，透過 :not() 的方式來排除額外的區塊，偽元素的應用也是這題的一個考量，當然也可以透過 background: radial-gradient(...) 的方式直接長出圓形出來，不過我也必須承認那個做法我真的不常使用，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !