Html 如何使用CSS给圆一个“a”；“部分边界”；

另一位用户（@Simon Zhu）询问是否可以使用CSS创建一个带有“部分边框”的圆，特别是一个围绕圆90度以上的弧形部分边框

请参见：

答案是肯定的-任何圆弧都可以使用

剪辑路径

和

边界半径

以及

：

伪元素

---

请参阅下面的答案。

您可以结合使用：

• 剪辑路径：多边形（）

• 边界半径

• ：：在伪元素之前

创建所需的任何部分圆边框

工作示例：

正文{
宽度：420px
}
.圆圈{
位置：相对位置；
浮动：左；
宽度：112px；
高度：112px；
保证金：6px 6px 12px 6px；
填充：6px；
背景色：rgb（255,0,0）；
边界半径：50%；
}
.圆圈：：之前{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
左：0；
宽度：124px；
高度：124px；
背景色：rgb（255、255、255）；
}
.圆圈：：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
显示：块；
宽度：100px；
高度：100px；
利润率：12像素；
背景色：rgb（255，255，0）；
边界半径：50%；
}
.圆圈：第n个类型（1）：：之前{
剪辑路径：多边形（0%0%、100%0%、100%50%、50%50%、50%100%、0%100%）；
}
.圆圈：第n个类型（2）：：之前{
剪辑路径：多边形（0%0%、100%0%、100%30%、50%50%、30%100%、0%100%）；
}
.圆圈：第n个类型（3）：：之前{
剪辑路径：多边形（0%0%、100%0%、100%10%、50%50%、10%100%、0%100%）；
}
.圆圈：第n个类型（4）：：之前{
剪辑路径：多边形（0%0%，50%0%，50%100%，0%100%）；
}
.圆圈：第n个类型（5）：：之前{
剪辑路径：多边形（0%0%、30%0%、50%50%、30%100%、0%100%）；
}
.圆圈：第n个类型（6）：：之前{
剪辑路径：多边形（0%0%、10%0%、50%50%、10%100%、0%100%）；
}
.圆圈：第n个类型（7）：：之前{
剪辑路径：多边形（0%10%、50%50%、0%90%、0%100%）；
}
.圆圈：第n个类型（8）：：之前{
剪辑路径：多边形（0%30%、50%50%、0%70%、0%100%）；
}
.圆圈：第n个类型（9）：：之前{
剪辑路径：多边形（0%45%，50%50%，0%55%，0%100%）；
}

这不是跨浏览器解决方案的可能副本。在IE/Edge中不起作用。鉴于Edge在2020年初采用了Blink渲染引擎（与Chrome和Opera使用的引擎相同），它现在可以在Edge中使用。