border radius屬性的使用方法

2021-10-08 16:05:37 字數 1272 閱讀 2204

border-radius用來實現圓角邊框。

一般這麼用:

效果為:

但是如果我把border-radius設為150px,就會變成圓形邊框

效果為:

為了方便,直接把border-radius設為50%也行。效果是一樣的。

但是如果想畫圓,則width和height必須要相等(這應該是基本常識吧)。

事實上,border-radius後可以接多個屬性值,像上面的乙個屬性值則預設四角都為該屬性值,若是四個屬性值顯然是與四角相對,這麼個相對法呢?從左上角開始,順時針一一對應。

舉例:

效果為:

我的天,注意各屬性值之間不要用「,」啊,只需要空格就行了,不小心用了個逗號結果輸出乙個正方形,查了半天錯。

劃重點,如果是三個屬性值就比較迷了,第乙個值表示左上角,第二個值表示右上角和左下角(對角),第三個值表示右下角。嘿嘿嘿,沒想到吧。這裡就不舉例了。

兩個屬性值倒也簡單,第乙個值表示左上角和右下角,第二個值表示右上角和左下角。沒什麼特別。亦不再多言。

另外,還有斜槓二組值:第一組值表示水平半徑,第二組值表示垂直半徑,每組值也可以同時設定1到4個值,規則與上面相同。

具體用法為:border-radius:60px/50px;

四個屬性值採用如下方法:border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;

這個簡直是個法寶啊,我們可以用它來畫各種不規則邊框。不過說實話,本人腦洞有點小,設計的圖案簡直醜出天際。

舉例畫個雞蛋吧:

有點胖了,長寬比調大一點就好了。

總而言之,利用border-radius屬性,能畫出很多有趣的邊框,只要腦洞大,各種創意不在話下。

border radius屬性詳解

border radius屬性的應用,大家最熟悉的應該就是頭像了,但其實,border radius屬性還是很強大的,你能相信,下面兩個圖形都是用border radius畫出來的麼?下面是我結合網上大佬們的部落格資料以及自己的實踐結果得出來的一些結論,有什麼不對的望各位大神們批評指出,謝謝 我們經...

border radius屬性詳解

在平時工作中border radius這個屬性,一直拷貝的ui的設計值,用的最多的也是border radius 50 這個屬性。竟然一直沒去深入了解過其特性。border radius 300px 300px 300px 300px 300px 300px 300px 300px 其中分別對應 左...

border radius屬性失效問題的解決辦法

今天除錯專案的時候突然發現,設定的border radius竟然失效了,開啟f12,眼看著瀏覽器把這個屬性也給劃掉了,不是一般的鬱悶,按照道理來說,不應該會出現這樣神奇的bug。photo解決辦法 萬能的 important 在border radius屬性裡面新增 important css中的 ...