星期三的CSS-CSSBattle#136

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

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

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

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

1. 首先我們先將圖面置中，這邊我會考慮使用 gird 的方式排版。
2. 裡面的結構簡單來說就是一個圓形一層，然後一層包著一層，有點類似俄羅斯娃娃的概念。
3. 最後再調整每一層的位移偏差。

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

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

那麼我們接著處理置中的處理，這次的對象除了底層以外，我會讓每一層 div 也處理置中。

body{
    margin: 0;
    background: #998235;
    display: grid;
    place-items: center;
}
div {
    display: grid;
    place-items: center;
}

每一層的寬度可以藉由平台的工具去計算寬度，那處理完就會如下：

.wrapper {
    width: 180px;
    height: 180px;
    background: #FCBE5C;
    border-radius: 50%;
}
.black {
    width: 140px;
    height: 140px;
    background: #0B2429;
    border-radius: 50%;
    translate: 10px;
}
.inner {
    width: 100px;
    height: 100px;
    background: #FCBE5C;
    border-radius: 50%;
    translate: -10px;
}
.center {
    width: 60px;
    height: 60px;
    background: #998235;
    border-radius: 50%;
    translate: 10px;
}

技術總結

這題除了考驗你對基本CSS置中排版的處理以外，再來就是要活用translate去做每一層 圓形的微調，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !