如何创建甜甜圈饼图的内部边框？

Question

我有一个甜甜圈饼图进度栏。 我想给他们一个内在的边界，我试过了

.pie{

  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  width:70px;
  height:70px;
  border:2px solid black;
  border-radius:50%;

}

我希望饼图如下所示：

我不断得到这个作为我的结果：

这是我的小提琴 。

Answer 1

这并不完美，但是您可以使用上，下，宽，下值，只需添加：

.easyPieChart *::before {
    border: 1px solid black;
    border-radius: 50%;
    bottom: 9px;
    content: " ";
    display: block;
    left: 8px;
    position: absolute;
    top: 10px;
    width: 83%;
    z-index: 99;
}

http://jsfiddle.net/gu3aL84e/6/

Answer 2

您的代码的问题是easyPieChart带有边框偏移，因为图表是使用canvas绘制的。

但是，您可以改用box-shadow ，将border线替换为：

box-shadow: inset 0 0 0 11px black;
-moz-box-shadow: inset 0 0 0 11px black;
-webkit-box-shadow: inset 0 0 0 11px black;

那应该为您解决问题。

顺便说一句，CSS的width和height都被覆盖到110,110 ，而不是70,70

---

编辑：

这是内部边框的工作代码，没有外部很难看到的外部边框：
HTML：

 <div class="pie" data-percent="90" > <span>6</span> </div> 

CSS：

 .pie { box-sizing:border-box; box-shadow: inset 0px 0px 0 10px black; border-radius:50%; } .pie canvas { position: absolute; top: -1px; left: -1px; width: 110px; height: 110px; } 

JS：

 $('.pie').easyPieChart({ barColor: '#62ae41', scaleColor: false, lineWidth: 10, trackWidth: 10, animate: false, lineCap: 'square', size: 110 }); $('.pie').css('width', '108px'); $('.pie').css('height', '108px'); $('.pie').css('line-height', '108px'); 

瞧，梦想的饼图。

一站式

---

说明：

在大多数情况下，这与您的小提琴相同，但更改的是：

• 饼图的大小已添加到选项中
• to hide the outer border, 画布被以隐藏外边界，
• 原始的div大小会减小，因此生成的画布内的所有影盒都将设置。

就是这样。

PS：当我不得不更改生成的代码的样式时，我讨厌它，但是我不得不使用生成的canvas