CSS中可以使用border-radius屬性來定義一個元素的圓角,包括半圓。
/* 圓形 */ .round { width: 100px; height: 100px; border-radius: 50%; } /* 半圓 */ .half-circle { width: 100px; height: 50px; border-top-left-radius: 50px 50px; border-top-right-radius: 50px 50px; }
上面的代碼中,.round元素是一個圓形,可以通過將寬度和高度設置為相同的值,border-radius設置為50%來實現。
對于半圓,我們可以定義一個寬度和高度不同的元素,并使用border-top-left-radius和border-top-right-radius屬性來實現。這兩個屬性需要傳遞兩個值,第一個值表示橢圓的水平半徑,第二個值表示垂直半徑。由于我們要實現半圓,所以兩個值應該相等。
半圓的樣子看起來有些奇怪,但是我們可以用transform屬性的rotate函數來將它旋轉90度,讓它變成一個具有良好外觀的半圓。
.half-circle { width: 100px; height: 50px; border-top-left-radius: 50px 50px; border-top-right-radius: 50px 50px; transform: rotate(90deg); }
以上代碼實現了一個半圓,并將其旋轉90度。
上一篇css3段顏色進度條
下一篇css 區間