在CSS中,我們可以使用border-radius屬性來設置盒子的圓角效果,但是有時候我們需要設置上邊的圓角,而下邊則保持直角的效果,這該怎么實現(xiàn)呢?
其實這個效果非常簡單,我們只需要分別設置上左圓角、上右圓角,以及下邊的直角即可。可以看下面的代碼示例:
.box { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 2px solid #ccc; }
上面的例子中,我們設置了上邊左右兩個角為10px的圓角,同時下邊設置了一條2px的實線邊框,使下邊變成直角。這樣就能實現(xiàn)上邊兩個圓角,下邊直角的效果了。
需要注意的是,如果你想設置其他角的圓角效果時,可以這樣寫:
.box { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 30px; border-bottom-right-radius: 40px; }
上面的例子中,我們分別設置了左上角10px、右上角20px、左下角30px、右下角40px的圓角效果。
下一篇html wmv 代碼