在CSS中,可以通過border-radius屬性實(shí)現(xiàn)圓角效果,該屬性通過指定一個(gè)值,可以使元素的邊框角變得圓弧化、扁平化或拋物線化。
border-radius: 10px;
該代碼表示設(shè)置圓角的半徑為10像素。如果想設(shè)置不同的圓角半徑,可以依次按順序指定4個(gè)值來實(shí)現(xiàn)。
border-radius: 10px 20px 30px 40px;
該代碼表示從左上角開始順時(shí)針指定4個(gè)半徑值,分別為10像素、20像素、30像素、40像素。如果指定兩個(gè)值,則分別表示上下半徑和左右半徑。
border-radius: 10px 20px;
此外,還可以將border-radius屬性拆分為4個(gè)相應(yīng)的單一屬性:border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius。
border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 30px; border-bottom-right-radius: 40px;
這可以更靈活地控制圓角的半徑和位置。
上一篇css中寬度用啥