tft每日頭條

 > 生活

 > cssborder怎麼控制三角形

cssborder怎麼控制三角形

生活 更新时间:2025-03-31 04:26:01

在css大家肯定知道如何設一個圓角矩形,或者把一個div設成圓型,很簡單,直接設置就行了,比如border-radius:5px; border-radius:50%; 或者你可以隻設置一個角的弧度:

border-top-right-radius: 20px;

但其實,這個css 屬性可以接受兩個參數,一個是水平弧度,一個是垂直弧度,會産生奇怪的效果。看下圖右上角設置不同值的變化。

cssborder怎麼控制三角形(CSS-你不知道的border-radius)1

僅設置一個值

cssborder怎麼控制三角形(CSS-你不知道的border-radius)2

設置兩個不同的值

所以border-radius其實可以接受兩組參數,會産生如下圖的奇怪形狀,可能設計師會喜歡這種不規則的樣子而用在你的項目裡:

border-radius: 1rem 2rem 3rem 4rem / 4rem 3rem 2rem 1rem;

cssborder怎麼控制三角形(CSS-你不知道的border-radius)3

上面的代碼可以被浏覽器解析如下圖:

cssborder怎麼控制三角形(CSS-你不知道的border-radius)4

大家看看屬性是怎麼對應起來的

如果可以加點動畫,就更有意思了。有興趣的可以打開codepen玩一下。https://codepen.io/geforcesong/pen/yLvRoRL

cssborder怎麼控制三角形(CSS-你不知道的border-radius)5

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved