边框CSS，颜色一定比例

Question

我想达到这样的效果：

您会看到橙色仅占整个边框的 35%。我怎样才能做到这一点？

HTML：

<div id="test">
    <h1> hello</h1>
</div>

CSS：

h1 {
    line-height: 80px;
    font-size: 20px;
    font-family: Arial;
}

#test {
    margin: auto;
    text-align: center;
    border-radius: 50%;
    height: 80px;
    width: 80px;
    border: 5px solid black;
}

Answer 1

这是使用 svg 和一些使用笔画破折号数组偏移量的技巧来实现此目的的一种方法。

\n\n

http://codepen.io/flurrd/pen/zZyrBx?editors=1100

\n\n

<div class="container">\n\n<h1>50%</h1>\n<svg\n    x="0px"\n    y="0px"\n    viewBox="0 0 397.6 435.3"\n    enable-background="new 0 0 397.6 435.3"\n    xml:space="preserve"\n    class="svg"\n    >\n      <circle\n        class="circle-bg"\n        cx="198.3"\n        cy="217.3"\n        r="139.2"\n        transform="rotate(270 198.3 217.3)"\n        />    \n\n      <circle\n        class="circle"\n        cx="198.3"\n        cy="217.3"\n        r="139.2"\n        transform="rotate(270 198.3 217.3)"\n        />               \n  </svg>\n</div>\n

\n\n

社会保障体系

\n\n

body{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n//circumference = 2\xcf\x80r \n// svg circle radius is 139\n\n$pi: 3.14159265358979;\n$Twopi: $pi * 2;\n\n$circumference: calc(#{$Twopi} * 139);\n$arc-length-percent: 0.5;\n\n.circle {\n  fill: none;\n  stroke-width: 10px;\n  stroke: tomato;\n  //0.5 - 50% \n  stroke-dasharray: calc(#{$arc-length-percent} * #{$circumference}) $circumference;\n}\n\n.circle-bg {\n  fill: none;\n  stroke-width: 10px;\n  stroke: grey;\n}\n\n\n//layout stuff\n\n.container {\n  width: 300px;\n  height: 300px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n}\n\nh1 {\n  font-family: sans-serif;\n}\n\nsvg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n

\n\n

编译的CSS

\n\n

body {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.circle {\n  fill: none;\n  stroke-width: 10px;\n  stroke: tomato;\n  stroke-dasharray: calc(0.5 * calc(6.28319 * 139)) calc(6.28319 * 139);\n}\n\n.circle-bg {\n  fill: none;\n  stroke-width: 10px;\n  stroke: grey;\n}\n\n.container {\n  width: 300px;\n  height: 300px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n}\n\nh1 {\n  font-family: sans-serif;\n}\n\nsvg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n

\n