站長(zhǎng)資訊網(wǎng)
在css中，可以利用border-radius屬性來(lái)將邊框設(shè)置為圓角，只需要給邊框元素添加“border-radius:半徑值;”樣式，即可同時(shí)設(shè)置四個(gè)圓角的半徑，將邊框的四個(gè)角都設(shè)置為圓角。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css設(shè)置圓角邊框最常用也是最簡(jiǎn)單的方法就是利用border-radius屬性。
CSS圓角只需設(shè)置一個(gè)屬性：border-radius（含義是"邊框半徑"）。你為這個(gè)屬性提供一個(gè)值，就能同時(shí)設(shè)置四個(gè)圓角的半徑。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。
border-radius可以同時(shí)設(shè)置1到4個(gè)值：
-
如果設(shè)置1個(gè)值，表示4個(gè)圓角都使用這個(gè)值。
<!DOCTYPE html> <html> <head> <style> div{ text-align:center; border:2px solid #a1a1a1; padding:80px 40px; background:pink; width:150px; border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ } </style> </head> <body> <div>圓角邊框</div> </body> </html>
效果圖：
-
如果設(shè)置兩個(gè)值，表示左上角和右下角使用第一 個(gè)值，右上角和左下角使用第二個(gè)值。
-
如果設(shè)置三個(gè)值，表示左上角使用第一個(gè)值，右上角和左下角使用第二個(gè)值，右下角使用第三個(gè)值。
-
如果設(shè)置四個(gè)值，則依次 對(duì)應(yīng)左上角、右上角、右下角、左下角（順時(shí)針順序）。
border-radius還可以用斜杠設(shè)置第二組值。第一組值表示水平半徑，第二組值表示垂直半徑。第二組值也可以同時(shí)設(shè)置1到4個(gè)值，應(yīng)用規(guī)則與第一組值相同。
