使用CSS为圆形元素添加轮廓线。

Question

我是一名有用的助手，可以翻译文本。

我有一个圆圈，使用以下样式创建：

.circle {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
}

我想在这个圆周围画一个轮廓，但是我希望它只在部分圆周围以产生百分比。

例如: 50％将从12点到6点开始创建轮廓 25％将从12点到3点开始创建轮廓 66％将从12点到8点开始创建轮廓

由于宽度和高度已定义，因此我可以通过在相同位置创建一个略大的圆来创建轮廓，尽管我不知道如何创建“饼形”。 我还希望能够支持尽可能多的浏览器。

提前致谢。

- Pav Sidhu

---

SVG可能是你解决这个问题的最佳方案。 - MoLow

看看这个 - https://dev59.com/D4zda4cB1Zd3GeqPo58j#31199281。看起来和你需要的很相似。 - Harry

https://dev59.com/wG025IYBdhLWcg3w4qIx - MoLow

最好不要使用SVG解决方案，因为IE的支持问题。 - Pav Sidhu

您也可以使用画布(canvas)。但是我无法想到一个仅使用CSS的解决方案，尤其是当您需要IE浏览器的解决方案时。 - j08691

Answer 1

基本上，您可以使用任何能够生成饼图的库，然后在其中放置一个圆形，与您页面（或元素）的背景颜色相匹配，使其看起来像一个甜甜圈（实际上是一个甜甜圈图表）。当然，您只需要为应用程序使用两个片段。

https://github.com/azagniotov/pielicious

插件扩展至http://raphaeljs.com/。

即使在IE8上也能完美运行。

我将其改编为我的当前项目中的自定义knockout.js绑定。这就是结果:

- connexo

---

实际上这不是CSS，而是SVG :) - connexo