CSS3中的半圓實(shí)現(xiàn)方式相對(duì)容易,通過border-radius屬性配合background-color屬性即可實(shí)現(xiàn)半圓形狀的效果。
下面是一個(gè)實(shí)現(xiàn)半圓形狀的代碼示例:
.half-circle { width: 100px; height: 50px; border-radius: 0 0 50px 50px; background-color: #f00; }
代碼中的width和height屬性分別指定了矩形的寬度和高度,border-radius屬性的值前兩個(gè)參數(shù)分別指定了左上角和右上角的圓角半徑,后兩個(gè)參數(shù)分別指定了左下角和右下角的圓角半徑。由于需要實(shí)現(xiàn)半圓形狀,所以左下角和右下角的圓角半徑都設(shè)置為矩形高度的一半。
實(shí)際上,通過border-radius屬性還可以實(shí)現(xiàn)更多類型的圓角效果,如橢圓、正方形等,具體可以根據(jù)需求來進(jìn)行調(diào)整。
上一篇css3 云