Makzan

我管理世界職業技能競賽之網站技術項目、舉辦本地設計與開發賽事、開課分享技術心得。一個用網頁來表達自己的作家。

使用 CSS border-radius 來畫不同的形狀。

我逢星期二會不定期推出 #CSS樣式星期二,介紹不同的 CSS 特效與技巧。在這個網站技術正在佔領各平台軟件界面的年代,用好 CSS 樣式可以使大家事半功倍。

今天我們來使用 CSS border-radius 去畫不同的形狀。

圓形

首先,當一個 DIV 長寛一樣時,可以使用 border-radius 50% 來製作圓形。配一個底色或漸變色來控制。

而當長寛不一樣時,若使用高度的一半作為 border-radius,則我們可以得出藥丸形狀。即類似圓角按鈕的效果。

藥丸形





另一個使用方式是不使用底色,而使用邊框顏色。配搭起不同的邊框顏色,我們可以將圓形分成四份。例如當長寛為零時,並且將 4 條邊設定為不同的顏色,就可以有類似如下的效果。

四邊不同顏色

當其中三邊為透明色,而只有一邊有顏色時,我們可以製作出一個餡餅批(Pie)形。

餡餅形

甚至乎,如果不是四邊一樣寛度,我們可以得出不對稱的形狀,例如領帶形等。大家可以嘗試一下不同的長寬及不同邊上色,可以造成不同的好玩形狀。

領帶形




回到正常一點的餡餅批形,若我們將角度稍為轉 45 度,然後製作一邊、兩邊、三邊、四邊顏色填滿。這樣就可以形成一個圓餅形進度圖。可以分別表達 0%, 25%, 50%, 75%, 100% 的進度。

圓餅形進度

如果這個進度條配上一個數字內容及長度寛度,就可以形式一個中空的圖形進度。不過由於要處理 45 度角打斜,所以我們需要分成兩層,使用 :after 來實現剛剛的圓餅圖。

圓形數字進度

另外,我們亦可以設定四個角有不同的圓角值,例如可以左上及右下為一組、右上及左下為一組,從而造成打斜的效果。例如我們可以用這個不對稱製作營光筆標記 Highlight 效果,這個效果加上少少的 box-shadow 會更像真,這個 box-shadow 設定了 0px x/y 位移、2px blur 模糊及 3px 向外擴展。找天我再另外寫寫 box-shadow 的很多好玩效果。

<mark> 配上營光筆效果

今期先就這樣,下星期二繼續示範其他 CSS 好玩技巧。

— 麥誠 Makzan,2021-11-16。


我是麥誠軒(Makzan),除了正職外,平常我要麼辦本地賽與辦世界賽,要麼任教編程與網站開發的在職培訓。現正轉型將面授培訓內容寫成電子書、網上教材等,至今撰寫了 7 本書, 2 個視頻教學課程。

我逢星期二會不定期推出 #CSS樣式星期二,介紹不同的 CSS 特效與技巧。在這個網站技術正在佔領各平台軟件界面的年代,用好 CSS 樣式可以使大家事半功倍。

如果我的文章有價值,請訂閱贊助我持續創作分享。

訂閱贊助:https://liker.land/thomasmak/civic





喜歡我的文章嗎?
別忘了給點支持與讚賞,讓我知道創作的路上有你陪伴。

CC BY-NC-ND 2.0 版權聲明
6

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區