如何讓Div呈現圓角,除了方方正正以外的選擇

起因

大家移駕旁邊一下下,可以看到我側邊的文章欄新增了框線讓【近期文章】、【熱門文章】…等有比較明顯的區別 (電腦版在右手邊,手機版的話可能要拉到文章下面了)

重點是直角的框線總讓我覺得有點生硬,所以在經過研究後發現了一個新的屬性

也就是本次的主題 – 【border-radius】屬性

border-radius

相信大家應該跟 border 都不陌生吧,那就是常見的邊框

而 radius 這個英文單字的中文是 【(圓或球體的)半徑,半徑長度 】,看到這個應該就明白了,跟圓有關 !

border-radius 是一個 CSS3 的屬性,用於控制元素邊框的圓角效果,可以讓你創建不同類型的圓角。

最基本的如下,直接看個範例

See the Pen border-radius_example by story zyra (@story-zyra) on CodePen.

可以看到提供了兩個範例,呈現了不同的效果 (為了方便顯示特別改了顏色)

要是只設定一個參數,那四個角都會用那個數字去做為圓角的半徑

另外也支援多個參數,分別是從左上一路順時針轉動對應的各個角

(範例特別只設定了3個,是要說明如果沒設定就會跟第一個一樣)

大家有注意到嗎? 除了設定px外,其實也可以用 %來設定,提供了更高的自由度

可以只對特定角設定嗎?

當然 ! 不過這時候要使用另外的幾個兄弟屬性,分別是

  • border-top-left-radius – 左上
  • border-top-right-radius – 右上
  • border-bottom-left-radius – 左下
  • border-bottom-right-radius – 右下

這樣就可以只針對需要的去進行設定了


結論

一天比一天更崇拜前端工程師了!? 這些都是些什麼啦哈哈

難怪他(她)們可以畫出那麼好看的樣式,到底還有多少我沒用過的屬性…

參考文章 :

🧡如果這篇文章有提供一點幫助,那很棒,沒有的話我再接再厲

🧡幫我點一個小小的廣告或留言,都是對我的支持(每天都只有詐騙跟色情留言…)

✅如有任何疑問,歡迎透過留言或messenger讓我知道 !

有點專業。但也不是很專業的筆記

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *