如何僅使用單一 Div 在 CSS 中建立半圓？

用於創建半圓的優雅CSS 解決方案

僅使用單個div 且無需外部的CSS 創建半圓的挑戰庫可以優雅地解決。

利用Border-Radius 和Borders

一個方法是使用border-top-left-radius 和border-top-right- radius 屬性根據盒子的高度來圓化盒子的角落。與頂部、右側和左側的邊框結合，以實現半圓效果。

CSS 代碼：

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

替代Box-Sizing

另一個選擇是使用box-sizing: bbox-box 屬性在框框的寬度和高度的計算包含邊框和填充。這允許在 CSS 中使用精確的半徑和邊框值。

CSS 程式碼：

<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;

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

這些方法為建立半圓形提供了優雅且僅 CSS 的解決方案，滿足使用單一div的要求，避免額外的函式庫。

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