CSS的border屬性是一個用于設置各種單獨的邊界屬性的簡寫屬性。border可以用于設置一個或多個以下屬性的值:
border-width, border-style, border-color。
border-radius: 15px;
border-radius: 15px;
這條語句同時將每個圓角的"水平半徑"(horizontal radius)和"垂直半徑"(vertical radius)都設置為15px。
horizontal radius - vertical radius
border-radius可以同時設置1到4個值。如果設置1個值,表示4個圓角都使用這個值。如果設置兩個值,表示左上角和右下角使用第一個值,右上角和左下角使用第二個值。如果設置三個值,表示左上角使用第一個值,右上角和左下角使用第二個值,右下角使用第三個值。如果設置四個值,則依次對應左上角、右上角、右下角、左下角(順時針順序)。
分別設置兩個值和三個值
border-radius還可以用斜杠設置第二組值。這時,第一組值表示水平半徑,第二組值表示垂直半徑。第二組值也可以同時設置1到4個值,應用規則與第一組值相同。
設置兩組值
仔細觀察體會值的應用
參考鏈接:CSS3圓角詳解