css中圓角的屬性border-radius用于為一個盒子(div)的邊緣設置圓角。而半圓則可通過設置一個方框(border)的某些角的半徑為100%來實現。下面是實現半圓的css代碼:
.half-circle { width: 50px; height: 25px; border-top-left-radius: 50px 25px; border-top-right-radius: 50px 25px; border: 1px solid black; }
在上述代碼中,width和height分別代表半圓的寬度和高度。border-top-left-radius和border-top-right-radius屬性設置了四個角的圓角半徑。此時,左上角和右上角的半徑分別為50px和25px,而左下角和右下角的半徑為0,從而實現了半圓形狀。
如果想要將半圓垂直居中,只需將height設置為與寬度相等即可:
.half-circle { width: 50px; height: 50px; border-top-left-radius: 50px 50px; border-top-right-radius: 50px 50px; border: 1px solid black; }
此時,半圓會在垂直和水平方向上居中,顯得更加美觀。在實際應用中,這種半圓形狀常用于制作按鈕、標簽等元素。