CSS中有一個很好用的屬性——border-radius,可以讓我們輕松實現圓角效果。不僅僅是左上角、左下角、右上角、右下角,通過使用border-top-right-radius和border-bottom-right-radius屬性,我們也可以實現右邊圓角的效果。
.box { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
上述代碼中的.box是指定待實現右邊圓角效果的元素,border-top-right-radius和border-bottom-right-radius屬性分別控制了右上角和右下角的圓角大小。值得注意的是,當我們使用border-radius屬性時,如果只想控制某個角的圓角大小,需要寫明對應的屬性,否則會將所有四個角的圓角大小都修改。
此外,我們也可以同時控制多個角的圓角大小,只需要將對應的屬性值寫在一起即可。比如,要實現左上角和右下角為8像素,左下角和右上角為10像素的圓角效果,代碼如下:
.box { border-top-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; }
上述代碼中的.box是指定的樣式名,分別控制了四個角的圓角大小。