在CSS中,我們可以利用border-radius屬性來(lái)實(shí)現(xiàn)長(zhǎng)方形四個(gè)邊中的一個(gè)或多個(gè)邊的圓弧效果。下面是一個(gè)例子,展示如何制作只有左上角圓弧的長(zhǎng)方形:
.mybox{ width: 200px; height: 100px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; border: 1px solid black; }
代碼中,我們首先設(shè)置了該元素的寬度和高度,然后通過(guò)border-top-left-radius和border-bottom-left-radius來(lái)分別設(shè)置左上角和左下角的圓弧半徑。同時(shí),為了讓邊框顯示出來(lái),我們還添加了border屬性。
如果我們想要制作只有上邊框圓弧的長(zhǎng)方形,可以這樣寫(xiě):
.mybox{ width: 200px; height: 100px; border-top-left-radius: 20px; border-top-right-radius: 20px; border: 1px solid black; }
代碼中,我們分別設(shè)置了左上角和右上角的圓弧半徑,從而制作出只有上邊框圓弧的長(zhǎng)方形。
如果我們想要圓化所有邊框,可以這樣寫(xiě):
.mybox{ width: 200px; height: 100px; border-radius: 20px; border: 1px solid black; }
代碼中,我們使用了border-radius屬性并將值設(shè)置為圓弧半徑,從而制作出所有邊框圓弧的長(zhǎng)方形。