是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題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~ !
