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%;
}

css - 只着色边框

1 个答案: