用 CSS 勾勒圆形元素答案

【问题标题】：Outlining a circular element with CSS用 CSS 勾勒圆形元素
【发布时间】：2015-11-11 16:39:49
【问题描述】：

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

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

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

例如：

作为宽度和高度和定义，我可以通过在相同位置创建一个稍大的圆圈来创建轮廓，尽管我不知道如何创建“饼”形状。

我还希望能够支持尽可能多的浏览器。

提前致谢。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：