在CSS3中,我們可以使用border-radius屬性來為元素添加圓角。
但有些時候,我們需要添加弧線,該怎么做呢?
這時,我們可以使用border-radius屬性的擴展功能,即使用四個值來分別指定每個角的半徑。
舉個例子:
.box { border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 200px; border-bottom-left-radius: 50px 200px; }
上面的代碼中,我們?yōu)槊總€角指定了兩個值:水平半徑和垂直半徑。
這樣就可以實現(xiàn)不同角的弧線效果了。
下面,我們來看一下具體的效果展示:
這是一個弧線效果的盒子
通過上述代碼,我們可以實現(xiàn)四個角弧線不同的效果。