CSS中圓角是一種常見的效果，通過使用border-radius屬性可以實(shí)現(xiàn)。border-radius屬性用于設(shè)置元素的圓角半徑，可以用一個(gè)值來設(shè)置四個(gè)角都相同的半徑，也可以分別設(shè)置每個(gè)角的半徑。

/*設(shè)置四個(gè)角都相同的圓角*/
border-radius: 10px;
/*分別設(shè)置每個(gè)角的圓角*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

除了使用像素值，還可以使用百分比和關(guān)鍵字值來設(shè)置圓角半徑。

/*使用百分比*/
border-radius: 50%;
/*使用關(guān)鍵字*/
border-radius: 10px/20px;
/*第一個(gè)值是水平方向半徑，第二個(gè)值是垂直方向半徑*/

在使用border-radius時(shí)，需要注意一些細(xì)節(jié)：

• 當(dāng)元素的寬高不相等時(shí)，使用百分比的圓角半徑會(huì)出現(xiàn)橢圓形。
• 當(dāng)元素存在背景顏色或背景圖片時(shí)，圓角部分的顏色也會(huì)受到影響。
• IE8及以下版本不支持border-radius屬性。