如何僅使用 CSS 建立半圓？

只使用CSS 建立半圓

問題：

問題：

解：

利用邊框半徑與邊框：

利用此效果，可以利用CSS 屬性border- top-left-radius 和border-top-right-radius 根據框的高度和添加的邊框來圓化框的角落。然後將邊框套用到框的頂部、右側和左側，完成半圓形。

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

CSS 程式碼：

此方法只使用單一 div 元素即可有效渲染半圓。

使用box-sizing 的替代方法： border-box:

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

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

另一個選項涉及box-sizing 屬性，可以將其設為border-box 以在計算框的寬度和高度時考慮邊框。

這兩種方法都可以單獨使用 CSS 有效地模仿半圓形形狀。

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