如何使 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

你要问的是：是什么造成了圆的宽度。明显的反应是 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

如何使 HTML/CSS 图表的边框更细？

How do I make the borders on a HTML/CSS percent chart thinner?

html

css

jquery

codepen