星期三的CSS-CSSBattle#96

Lee Luciano

更新於 2024/04/17發佈於 2024/04/17閱讀時間約 7 分鐘

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

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

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

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

這個圖案讓我想到國中的數學，感覺等一下要問你面積是多少XD

一樣先考慮用一個 wrapper 將整個圓形圖案置中，那我會比較習慣使用 grid 來處理。
條紋的部分可以想成四個圓形，帶有比較粗的 border，圓心可能會在上下左右靠近邊界的地方，互相堆疊所產生的紋路。
所以，wrapper 會是 position: relative;，內層4個圓圈會是 position: absolute;。
最後 wrapper 可能還要加上 overflow: hidden;。

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

<div class="wrapper">
  <div id="t" class="strap"></div>
  <div id="r" class="strap"></div>
  <div id="b" class="strap"></div>
  <div id="l" class="strap"></div>
</div>

這邊考量將四個圓圈的定位，改由 id 來處理，class 的部分統一處理線條樣式等問題。

body {
    margin: 0;
    display: grid;
    place-items: center;
    background: #243D83;
}
.wrapper {
    width: 200px;
    height: 200px;
    background: #6592CF;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}
.strap {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 20px solid #243D83;
    position: absolute;
}
#t {
    top: -60px;
    left: 15px;
}
#r {
    top: 15px;
    right: -60px;
}
#b {
    bottom: -60px;
    left: 15px;
}
#l {
    top: 15px;
    left: -60px;
}

微小的誤差

上面就是我初步設想和測量後相符的解法，但實際送出後卻沒有達到實際100%的吻合，起初我以為是計算上的誤差，於是我又調整了上下左右的像素數值，但始終就是差那麼一點，不到 0.001的偏差值。

其實常做CSS battle的開發者會常常遇到類似的問題，主要是計算誤差值，也就是我們常說的 IEEE-754 所造成問題，那麼官方給出的解法是採用CSS中 radial-gradient() 方法，來計算圓形漸層的渲染，我不推薦是因為這個需要有一點元面積與橢圓面積公式基礎，不然畫出來的東西會有偏差，而且直接畫出來的話也不利於component 互動上的複用。

官方的解法

body {
    background: radial-gradient(1px at 50% 75px, #0000 65px, #243D83 65px 85px, #0000 1%),
        radial-gradient(1px at 50% 225px, #0000 65px, #243D83 65px 85px, #0000 1%),
        radial-gradient(1px at 125px, #0000 65px, #243D83 65px 85px, #0000 1%),
        radial-gradient(1px at 275px, #0000 65px, #243D83 65px 85px, #0000 1%),
        radial-gradient(200px, #6592CF 100px, #243D83 1%);
}

圓形的背景漸層

radial-gradient() 他主要是來處理投射光漸層效果，可以想像成光源打在牆壁上擴散的效果，所以形狀會是圓形或是橢圓形的，基礎的使用與參數的概念如下：

radial-gradient([<shape> at <position>], <color-stop>, <color-stop>, ...)

<shape> : 是指形狀，可以是 circle 或 ellipse。如果省略，預設值通常是 ellipse。
<position>：定義漸層的位置，如 center, top, 50% 50%（預設值為 center）。
<color-stop>：顏色的停頓點，定義漸層切換顏色的點位以及出現消失的位置。每个颜色停靠点可以是一个颜色值和/或一个位置（如 red 50%）。

以上述官方的例子為例：

radial-gradient(1px at 50% 75px, #0000 65px, #243D83 65px 85px, #0000 1%)

這個 radial-gradient() 方法可以分為以下幾部分：

漸層大小和位置：

- 1px at 50% 75px：這表示漸層的大小是直徑為 1px 的極小圓形，然後位置是相對於元素的水平位置為 50%（通常是元素寬度的中點），垂直位置為 75px。這種特殊的大小設定實際上在視覺上不會顯示為一個可見的圓形，而是用來創建一個顏色的 "點"。

顏色停靠點：

- #0000 65px：顏色停靠點開始於距離漸層中心 65px 的位置，顏色 #0000 是一個透明色，這裡使用四個數字的十六進位表示透明。
- #243D83 65px 85px：從 65px 到 85px，顏色從透明過渡到 #243D83（一種深藍色）。這表示從漸層中心向外 65px 的位置開始變為深藍色，直到 85px 的位置。
- #0000 1%：從 85px 的位置後，顏色再次過渡回透明，就是作為沒有過度的最小值，因為後面直接是 1% 的位置標記。

技術總結

這題主要還是要靠 background: radial-gradient(...) 的方式直接長出整個圖案來解，不過我也必須承認那個做法我真的不常使用，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !