如何僅使用 CSS 建立半圓？

只使用CSS 建立半圓

問題：

問題：

解：

利用Border-Radius 和Border：

要實現此效果，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 元素即可有效渲染半圓。

使用框大小調整的替代方法： 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中文網其他相關文章！