只使用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>此方法只使用單一 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中文網其他相關文章！
