如何使用单个 Div 通过 CSS 创建半圆？-css教程-PHP中文网

如何使用单个 Div 通过 CSS 创建半圆？

Mary-Kate Olsen

发布： 2024-10-26 09:29:29

原创

294 人浏览过

How to Create a Half-Circle with CSS Using a Single Div?

使用 CSS 创建半圆

问题：

如何仅使用 CSS 创建半圆，使用单个 div 元素并且不依赖 SVG 或图形 API 等外部工具？

答案：

使用 CSS 实现半圆效果可以通过利用边框属性。要执行此操作：

使用 border-top-left-radius 和 border-top-right-radius 根据框的高度和任何添加的边框对框的角进行圆化。例如：

border-top-left-radius: 110px;  // Height + Border
border-top-right-radius: 110px; // Height + Border

登录后复制

在框的顶部、右侧和左侧添加边框。将 border-bottom 设置为零以删除底部边框。

border: 10px solid gray;
border-bottom: 0;

登录后复制

圆角和边框的这种组合创建半圆形。

示例：

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

登录后复制

替代方法：

另一种方法是使用 box-sizing: border-box，它计算盒子的宽度和高度包括边框和填充。这样，您就可以将高度指定为宽度的一半：

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

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

登录后复制

这两种方法都可以使用纯 CSS 技术实现所需的半圆效果。

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