如何仅使用 CSS 创建半圆？

仅使用 CSS 创建半圆

问题：

半圆形可以吗使用 CSS 创建形状，无需外部工具或图形，显示如参考中所示图片？

解决方案：

利用 Border-Radius 和 Border：

要实现此效果，CSS 属性 border -top-left-radius 和 border-top-right-radius 可以根据盒子的高度来圆化盒子的角并添加边界。然后将边框应用到框的顶部、右侧和左侧，完成半圆形。

CSS 代码：

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

另一个选项涉及 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>

这两种方法都可以单独使用 CSS 有效地模仿半圆形。

以上是如何仅使用 CSS 创建半圆？的详细内容。更多信息请关注PHP中文网其他相关文章！