圓角只圓2邊是CSS的一個比較常用的技巧,該技巧可以使元素擁有圓角效果,但僅限于2個對立面的邊角。
在CSS中,我們通過border-radius屬性來設(shè)置元素的邊框圓角效果。與此相對的屬性是border-width,這個屬性用來設(shè)置邊框的寬度。我們可以同時使用這兩個屬性,來實現(xiàn)圓角只圓2邊的效果。
/* 圓角只圓左上角和右上角 */ .rounded-top { border-radius: 10px 10px 0 0; border-width: 4px; border-style: solid; } /* 圓角只圓左下角和右下角 */ .rounded-bottom { border-radius: 0 0 10px 10px; border-width: 4px; border-style: solid; }
從以上代碼中可以看出,我們通過調(diào)整border-radius來實現(xiàn)不同的圓角效果。圓角只圓2邊的方法,是針對圓角漸變的一種特殊處理,通過控制不同方向上的圓角大小,實現(xiàn)只圓2個對立面的圓角效果。