CSS3中可以使用border-radius
屬性來實現(xiàn)元素的圓角效果,但有時候我們只需要半邊圓角,那么應該如何實現(xiàn)呢?
我們可以通過設(shè)置border-radius
屬性為正值來實現(xiàn)元素的圓角效果,
.half-rounded { border-radius: 10px; }
上述代碼會將元素的四個角都設(shè)置為圓角,如果我們只需要半邊圓角,那么可以通過設(shè)置border-radius
屬性為不同的值來實現(xiàn),如果我們只需要左上角和右下角為圓角,那么可以設(shè)置為:
.half-rounded { border-radius: 10px 0 0 10px; }
上述代碼中,10px
表示圓角的半徑大小,而0
則表示該角不設(shè)置為圓角,上述代碼會將元素的左上角和右下角設(shè)置為圓角,而左下角和右上角則保持直角。
除了上述方法外,還可以通過設(shè)置border-radius
屬性為百分比來實現(xiàn)元素的圓角效果,如果我們希望元素的寬度和高度都為100px,并且只將左上角和右下角設(shè)置為圓角,那么可以設(shè)置為:
.half-rounded { width: 100px; height: 100px; border-radius: 50% 0 0 50%; }
上述代碼中,50%
表示圓角的半徑大小為元素寬度或高度的一半,而0
則表示該角不設(shè)置為圓角,上述代碼會將元素的左上角和右下角設(shè)置為圓角,而左下角和右上角則保持直角。
通過合理的設(shè)置border-radius
屬性,可以實現(xiàn)CSS3中的半邊圓角效果。