CSS中,圓角是一種常用的效果,它可以讓網(wǎng)站的界面看上去更加美觀。而要將列表(如
- 或
- 元素變成圓角,可以使用border-radius屬性。
border-radius屬性用于設(shè)置元素的圓角,可以設(shè)置一個(gè)或多個(gè)值來(lái)控制圓角的弧度。其中,第一個(gè)值控制左上角,第二個(gè)值控制右上角,第三個(gè)值控制右下角,第四個(gè)值控制左下角。如果只設(shè)置一個(gè)值,則四角都被設(shè)置為此值。
li{ border-radius: 10px; }
以上代碼將所有的
- 元素都設(shè)置為圓角,其四個(gè)角的弧度均為10個(gè)像素。
如果只想要某個(gè)
- 元素的某個(gè)角變成圓角,可以針對(duì)該元素設(shè)置單獨(dú)的border-radius值。例如:
li:nth-child(3){ border-radius: 0 0 10px 10px; }
以上代碼將第三個(gè)
- 元素的左下角和右下角設(shè)置為圓角,而其余三個(gè)角都不設(shè)置圓角。
- )中的