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

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%;

}

我希望我的饼图看起来像这样：

我不断得到这个结果：

这是我的Fiddle。

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');

瞧，梦想的饼图。

全部在一个jsfiddle

<小时/> 说明：

在大多数情况下，这与你的小提琴相同，改变了：

• 饼图的大小已添加到选项
• 画布移位以隐藏外边框
• 原始div大小减小，因此所有阴影框都在生成的画布内设置。

就是这样。

PS：当我必须改变生成代码的样式时，我讨厌它，但我必须使用生成的canvas