Question

我已经创建了4个块，而中间则是一个带有透明背景和边框的圆圈。如何才能使边界成为进度条？或者有没有办法让边界成长？例如，只有40％的边框是彩色的，其余的是其他颜色？这是我当前的HTML / CSS代码

            .block {
              width: 200px;
              height: 200px;
              background-color: purple;
              display: inline-block;
              margin-right: 10px;
              margin-top: 10px;
              position:relative;
              z-index: -1;
            }
            .circle {
              width: 140px;
              height: 140px;
              background: transparent;
              border: 40px solid orange;
              position: absolute;
              z-index: 1;
              margin-left: 95px;
              margin-top: 110px;
              border-radius: 50%;
              -webkit-box-shadow: inset 0px 0px 53px -13px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 53px -13px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 53px -13px rgba(0,0,0,0.75);
            }

 <!DOCTYPE html>
    <html>

    <body>
    </body>
    <div class="blocks">
      <div class="circle">
      </div>
    <div class="block">
    </div>
    <div class="block">
    </div><br />
    <div class="block">
    </div>
    <div class="block">
    </div></div>
    </body>

圆角边框用作进度条？

0 个答案: