html - css - 仅着色边框

Question

于是我做了一个空心圆，里面有文字，代码是:

.numberCircle 
{
    border-radius: 50%;
    behavior: url(PIE.htc);
    width: 512px;
    height: 512px;
    padding-top: 114px;
    background: #fff;
    border: 32px solid #000;
    color: #0099FF;
    text-align: center;
    font-size: 120px;
    position: relative;
}

JSFIDDLE

例如，我怎样才能使边框只有四分之一或一半(或更多)为蓝色？

Answer 1

您可以研究使用 border-top、border-bottom、border-left 和 border-right 为边框本身的各个部分设置样式。

您还可以使用 border-top-right-radius、border-top-left-radius、border-bottom 更改每个部分的半径-left-radius 和 ``border-bottom-right-radius`。

这里有一个有点老套的解决方案，似乎可以提供预期的结果。

新的 HTML:

<div class="numberCircle">
  <div class="circleContent">
    3/10
    <span style="display:block;font-size:26px;color:#666;">128 credits</span>
  </div>
</div>

新的 CSS:

.numberCircle {
  width: 512px;
  height: 512px;
  padding: 114px;
  background: #fff;
  border-radius: 50%;
  border: 32px solid #000;
  border-right: 32x solid #0000ff;
  border-bottom: 32px solid #0000ff;
  -webkit-transform: rotate(-45deg);
  color: #0099FF;
  text-align: center;
  font-size: 120px;
  position: relative;
}

.circleContent {
  -webkit-transform: rotate(45deg);
  text-align: center;
  width: 100%;
  height: 100%;
}