在CSS中,我們可以使用border-radius屬性來(lái)制作圓角邊框,這個(gè)屬性可以接收一個(gè)值,這個(gè)值可以是像素、百分比等,用來(lái)定義圓角的半徑大小。
我們可以給div元素添加一個(gè)圓角邊框:
div { border: 10px solid #000; border-radius: 10px; }
上述代碼會(huì)給div元素添加一個(gè)10像素寬度的黑色邊框,并且邊框的四個(gè)角都會(huì)是圓角。
如果我們只想讓邊框的某個(gè)角是圓角,那么我們可以只給那個(gè)角添加border-radius屬性,如果我們只想讓右上角是圓角,那么我們可以這樣寫(xiě):
div { border: 10px solid #000; border-top-right-radius: 10px; }
上述代碼只會(huì)讓div元素的右上角是圓角,其他角都是直角。
如果我們想讓一橫行的所有元素都有圓角邊框,那么我們可以給那個(gè)橫行的父元素添加border-radius屬性,如果我們有一個(gè)包含兩個(gè)div元素的橫行,那么我們可以這樣寫(xiě):
div { border: 10px solid #000; } .row { border-radius: 10px; }
上述代碼中,.row是橫行的父元素,我們給它添加了border-radius屬性,那么橫行的所有元素(包括div元素)都會(huì)有圓角邊框。