1

截屏

大家好 ！

我想在 CSS 中创建一个小的圆形静态流量指示器，但我找不到解决方案。左边的平方指​​标没问题，但是太丑了，我想要它圆形！

我尝试过圆角（cf 屏幕截图右侧的指示器），我想知道是否有可能添加圆角遮罩来隐藏角落（参见 css3 遮罩：http ://webkit.org/blog/181 /css-masks/），但它似乎只适用于img ...

该解决方案仅适用于 webkit 浏览器，因为它适用于移动 webapp。

这是我在上图中创建（丑陋）指标的代码：

<div class="meter-wrap">
     <div class="meter-value" style="background-color: #489d41; width: 70%;">
            <div class="meter-text"> 70 % </div>
     </div>
</div>

和CSS：

.meter-wrap{
    position: relative;
}
.meter-value {

 background-color: #489d41;

}
.meter-wrap, .meter-value, .meter-text {
    width: 30px; height: 30px;
/* Attempt to round the corner : (indicators at the right of the screenshot)
-webkit-border-radius : 15px;*/
}
.meter-wrap, .meter-value {
    background: #bdbdbd top left no-repeat;
}          
.meter-text {
    position: absolute;
    top:0; left:0;
    padding-top: 2px;         
    color: #000;
    text-align: center;
    width: 100%;
 font-size: 40%;
 text-shadow: #fffeff 1px 1px 0;
}
4

1 回答 1

2

.meter-value在您的类周围添加一个包装器，将其设置overflow为hidden然后设置该层的宽度以获得所需的效果。课堂上的圆角.meter-value应该保持完整，并为您提供一个很好的流畅进度指示器。

您必须将.meter-textdiv 移到包装器之外，以确保它在整个转换过程中可见，因此您的 html 会像这样：

<div class="meter-wrap">    
    <div class="meter-text"> 70 % </div>  
    <div class="meter-value-wrapper" style="width:70%;">
        <div class="meter-value" style="background-color: #489d41;">
    </div>
</div>

for 的类.meter-value-wrapper可能如下所示：

.meter-value-wrapper { 
    overflow: hidden;
    width: 30px; 
    height: 30px;
}
于 2009-11-19T20:24:55.493 回答