CSS中創(chuàng)建圓角效果可以讓網(wǎng)頁看起來更加美觀。在CSS3中,可以使用border-radius屬性來創(chuàng)建圓角,其語法如下:
selector{ border-radius: value; }
其中,selector是要應(yīng)用圓角效果的元素的選擇器,value則是要設(shè)置的圓角半徑大小,可以設(shè)置單個(gè)值或多個(gè)值,如下所示:
/* 設(shè)置四個(gè)角的圓角半徑 */ border-radius: 10px; /* 設(shè)置左上角和右下角的圓角半徑為20px,右上角和左下角的圓角半徑為10px */ border-radius: 20px 10px;
border-radius屬性也可以設(shè)置不同水平和垂直方向的半徑大小:
/* 左上角水平方向?yàn)?0px,垂直方向?yàn)?5px,右上角垂直方向?yàn)?0px,其他角沒有圓角 */ border-radius: 30px 0 0 15px / 10px;
還可以設(shè)置具體的圓角形狀,如圓形、橢圓形,或不規(guī)則的形狀,實(shí)現(xiàn)靈活多變的效果,具體語法可以參考CSS中的border-radius屬性。