css3----画半圆弧线

最新推荐文章于 2025-04-11 16:31:05 发布

转载最新推荐文章于 2025-04-11 16:31:05 发布 · 546 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nullman/p/6743582.html

本文介绍了一种使用CSS边框及圆角属性来绘制不同方向半圆的方法，并提供了四个具体的样式示例。通过调整宽度、高度及边框样式，可以灵活实现上、下、左、右四个方向的半圆形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.circle1 {
    width: 100px;
    height: 200px;
    border: 1px solid black;
    border-radius: 100% 0 0 100%/50%;
    border-right: none;
}
.circle2 {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
}
.circle3 {
    width: 100px;
    height: 200px;
    border: 1px solid black;
    border-radius: 0 100% 100% 0/50%;
    border-left: none;
}
.circle4 {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    border-radius: 0 0 50% 50%/0 0 100% 100% ;
    border-top: none;
}

<ul>
    <li><div class="circle1"></div></li>
    <li><div class="circle2"></div></li>
    <li><div class="circle3"></div></li>
    <li><div class="circle4"></div></li>
</ul>