jquery - 如何使 HTML/CSS 百分比图表的边框变细？

Question

我正在尝试使用本教程中的百分比图表:https://codepen.io/anon/pen/XERbXQ

<div class="graphsWrapper">
        <section class="sect">
            <div>
                <div class="box-piesite">
                    <header>
                        <h1>Awwwards Pies</h1>
                        <p>Let's take a peak at them simple pie's</p>
                    </header>
                    <ul>
                        <li class="design">
                            <div class="piesite" id="pie_0" data-pie="2.04"></div>
                        </li>
                        <li class="usability">
                            <div class="piesite" id="pie_2" data-pie="5.00"></div>
                        </li>
                        <li class="creativity">
                            <div class="piesite" id="pie_1" data-pie="2.00"></div>
                        </li>
                        <li class="content">
                            <div class="piesite" id="pie_3" data-pie="6.43"></div>
                        </li>

                    </ul>
                </div>
            </div>
        </section>
    </div>

我可以让它正常工作，唯一的问题是我希望进度边框更薄，但我更改以尝试修复它的每个 css 样式都不会影响它。我用谷歌搜索了它，也许我使用了错误的术语，但我找不到任何答案。任何帮助深表感谢!

我要复制的内容的想法位于此页面的中间:

http://preview.themeforest.net/item/splendid-responsive-multipurpose-theme/full_screen_preview/13537450

Answer 1

你需要问的是:是什么导致了圆的宽度。最明显的 react 是 border-width - 但改变它只会移动它们，所以不是那样的。

接下来的事情是删除 CSS 的一部分，直到不再出现空心圆，然后确定导致创建圆形边框的原因。

给予:

.piesite:after {
  content:'';
  display:block;
  position:absolute;
  top:.05em;
  left:.05em;
  width:.9em;
  height:.9em;
  background:$color-lightgrey;
  border-radius:0.5em;
  z-index:1
}

相应地调整top: left: width:和height:并相互关联。

更新的代码笔:https://codepen.io/anon/pen/JLNYyy