CSS中有一個非常實用的屬性,它可以讓我們創建出具有圓角邊框的元素。這個屬性就是border-radius。
.border { border-radius: 10px; }
上面的代碼就是給類名為.border的元素添加了10像素的圓角邊框。我們也可以選擇給不同的邊框設置不同的圓角半徑:
.border { border-top-left-radius: 10px; border-bottom-left-radius: 20px; border-bottom-right-radius: 30px; border-top-right-radius: 40px; }
此時,我們為元素的四個角分別設置了不同的圓角半徑。這個屬性非常靈活,可以幫助我們制作各種漂亮的UI效果。
另外,如果我們想要制作出橢圓形的邊框,可以使用border-radius的兩個屬性:
.border { border-top-left-radius: 50%; border-bottom-right-radius: 50%; }
這里我們將border-radius的值設為50%,這樣就可以制作出橢圓形的邊框了。
綜上,border-radius是CSS中非常實用的一個屬性,可以幫助我們制作出各種漂亮的圓角邊框效果。