CSS畫一個半圓的方法非常簡單。
.half-circle { width: 100px; height: 50px; border-radius: 50px 50px 0 0; background-color: red; }
以上代碼就是一個可以畫出紅色半圓的CSS代碼。其中,width和height用來設置半圓的大小,兩個50px表示水平方向上的直徑為100px,垂直方向上的直徑為50px。border-radius是用來設置半圓的,其中前面兩個50px表示左上角和右上角的圓角,0表示圓角半徑為0,可以看成是一個直線。
最后,通過設置background-color來設置半圓的顏色。
可以通過調整width和height來改變半圓的大小,也可以設置border-width來改變半圓的邊框寬度,例如:
.half-circle { width: 100px; height: 50px; border-radius: 50px 50px 0 0; background-color: red; border: 2px solid black; }
增加了border:2px solid black;來為半圓添加了邊框,其中2px表示邊框寬度,solid表示邊框為實線,black表示邊框顏色為黑色。
以上就是CSS畫一個半圓的基礎知識和代碼,希望能對你有所幫助。
下一篇css畫一個幾何圖形