CSS中有一種常見的圓角樣式是左上右下50%圓角,它可以使一個元素的對應角(左上角,右上角,左下角,右下角)呈現半圓形的外觀,使得頁面看起來更加流暢自然。下面就是CSS實現左上右下50%圓角的代碼:
.round-corner { border-top-left-radius: 50%; border-top-right-radius: 0; border-bottom-right-radius: 50%; border-bottom-left-radius: 0; }
從代碼可以看出,左上角和右下角的圓角采用了50%的數值,而左下角和右上角則設置成了0。這樣就能夠實現左上右下50%圓角的效果。
同時,如果需要將一個元素的所有角都設置成左上右下50%圓角,還可以使用更加簡潔的CSS代碼:
.all-round-corner { border-radius: 50% 0 50% 0; }
這是因為CSS中的border-radius屬性可以接收4個參數,分別對應四個角上的圓角大小,按照順序依次為左上角、右上角、右下角、左下角。因此,我們只需要將前兩個位置和后兩個位置設置成相同的數值,就可以實現左上右下50%圓角的效果。