在css大家肯定知道如何設一個圓角矩形,或者把一個div設成圓型,很簡單,直接設置就行了,比如border-radius:5px; border-radius:50%; 或者你可以隻設置一個角的弧度:
border-top-right-radius: 20px;
但其實,這個css 屬性可以接受兩個參數,一個是水平弧度,一個是垂直弧度,會産生奇怪的效果。看下圖右上角設置不同值的變化。
僅設置一個值
設置兩個不同的值
所以border-radius其實可以接受兩組參數,會産生如下圖的奇怪形狀,可能設計師會喜歡這種不規則的樣子而用在你的項目裡:
border-radius: 1rem 2rem 3rem 4rem / 4rem 3rem 2rem 1rem;
上面的代碼可以被浏覽器解析如下圖:
大家看看屬性是怎麼對應起來的
如果可以加點動畫,就更有意思了。有興趣的可以打開codepen玩一下。https://codepen.io/geforcesong/pen/yLvRoRL
更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!