CSS2中,實現(xiàn)圓角可以通過使用border-radius
屬性來完成,這個屬性可以設(shè)置一個元素的圓角半徑,從而實現(xiàn)圓角效果。
如果你想要將一個元素的四個角都設(shè)置為圓角,你可以使用以下CSS代碼:
.element { border-radius: 10px; }
這會將.element
類的元素的四個角都設(shè)置為10像素的圓角,如果你想要設(shè)置不同大小的圓角,你可以使用斜線分隔的四個值來分別設(shè)置每個角的圓角半徑:
.element { border-radius: 10px 20px 30px 40px; }
這會將.element
類的元素的圓角半徑分別設(shè)置為10像素、20像素、30像素和40像素,注意,這些值可以是非負(fù)數(shù)值,包括百分比。
如果你想要設(shè)置不同大小的圓角,但只在某些角上設(shè)置,你可以省略其他角的值:
.element { border-radius: 10px 0 30px; }
這會將.element
類的元素的圓角半徑分別設(shè)置為10像素、0(不設(shè)置圓角)、30像素,注意,省略的值會被瀏覽器自動設(shè)置為border-radius
屬性的默認(rèn)值。
使用border-radius
屬性可以方便地實現(xiàn)CSS2中的圓角效果。