星期三的CSS-CSSBattle#96

閱讀時間約 7 分鐘

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

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

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

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

raw-image

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

  1. 一樣先考慮用一個 wrapper 將整個圓形圖案置中,那我會比較習慣使用 grid 來處理。
  2. 條紋的部分可以想成四個圓形,帶有比較粗的 border,圓心可能會在上下左右靠近邊界的地方,互相堆疊所產生的紋路。
  3. 所以,wrapper 會是 position: relative;,內層4個圓圈會是 position: absolute;
  4. 最後 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> : 是指形狀,可以是 circleellipse。如果省略,預設值通常是 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:從 65px85px,顏色從透明過渡到 #243D83(一種深藍色)。這表示從漸層中心向外 65px 的位置開始變為深藍色,直到 85px 的位置。
    • #0000 1%:從 85px 的位置後,顏色再次過渡回透明,就是作為沒有過度的最小值,因為後面直接是 1% 的位置標記。

技術總結

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


1會員
20內容數
留言0
查看全部
發表第一個留言支持創作者!