如何使用單一 Div 透過 CSS 創建半圓？

使用CSS 建立半圓

問題：

如何僅使用CSS 建立半圓，使用單一div 元素且不依賴SVG 或圖形API 等外部工具？

答案：

使用 CSS 實現半圓效果可以透過利用邊框屬性。若要執行此操作：

1. 使用 border-top-left-radius 和 border-top-right-radius 根據框的高度和任何新增的邊框對框的角落進行圓化。例如：

border-top-left-radius: 110px;  // Height + Border
border-top-right-radius: 110px; // Height + Border

2. 在框的頂部、右側和左側加上邊框。將 border-bottom 設為零以刪除底部邊框。

border: 10px solid gray;
border-bottom: 0;

圓角和邊框的這種組合創建半圓形。

範例：

<code class="css">.half-circle {
    width: 200px;
    height: 100px;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    border: 10px solid gray;
    border-bottom: 0;
}</code>

取代方法：

另一個方法是使用box-sizing: border- box，它計算盒子的寬度和高度包括邊框和填充。這樣，您就可以將高度指定為寬度的一半：

<code class="css">.half-circle {
    width: 200px;
    height: 100px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    box-sizing: border-box;
}</code>

這兩種方法都可以使用純 CSS 技術來實現所需的半圓效果。

以上是如何使用單一 Div 透過 CSS 創建半圓？的詳細內容。更多資訊請關注PHP中文網其他相關文章！