CSS可以方便的實現(xiàn)圓角邊框樣式,我們可以使用border-radius屬性來設(shè)置元素的圓角。
border-radius屬性接受一個或多個值,方法是使用斜杠分隔。每個值都指定四個圓角的半徑。如果提供的值不夠用,則使用最后一個值來填充缺少的值。
例如,如果我們想設(shè)置所有四個圓角的半徑為10像素:
border-radius: 10px;
此時,元素的四個角都將是圓角。如果我們只希望左上和右下的角是圓角,而其他角是方角,則可以這樣寫:
border-radius: 10px 0 10px 0;
這里的值以順時針方向依次指定每個角,因此10px是左上角和右下角的半徑,0是右上角和左下角的半徑。
我們甚至可以為每個角都指定不同的半徑。像這樣:
border-radius: 10px 5px 20px 15px;
這里左上角的半徑是10像素,右上角的半徑是5像素,右下角的半徑是20像素,左下角的半徑是15像素。這樣就可以實現(xiàn)各種風格的圓角邊框效果。