用CSS只显示圆形指示器

大家好！

我想在CSS中创建一个小的圆形静态指示器，但我找不到解决方案。左边的方形指示器没问题，但如此狡猾，我想要它！

我试着用圆角（比较屏幕右侧的指标），我想知道是否有可能添加一个圆角掩码来隐藏角点（参见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; 
}

来源

2009-11-19 Samuel

你是什么意思的圆进度指标？通常情况下，进展是线性的，然后到达最后，这样就可以使自己成为一条线。 – rjmunro 2009-11-19 20:02:26

添加一个包装周围的.meter-value类，它的overflow设为hidden，然后设置该图层的宽度以获得所需的效果。 .meter-value类的圆角应保持不变，并为您提供一个很好的流体进度指示器。

你必须移动.meter-text DIV包装的外面，以确保它在整个过渡是可见的，所以你的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>

而对于.meter-value-wrapper类可能看起来像：

.meter-value-wrapper { 
    overflow: hidden; 
    width: 30px; 
    height: 30px; 
}

来源

2009-11-19 20:24:55

非常感谢您的回答，但我不想要一个动态的进度指示器。它更像是一个视觉和静态的指示物。左边的方形指示器没问题，但如此狡猾，我想要它！对不起，如果我的问题不明确。 – Samuel 2009-11-19 20:32:42

上述示例适用于两者。要创建静态百分比指标，只需设置.meter-value-wrapper类的宽度。 – 2009-11-19 20:35:03

非常感谢克里斯，它像一个魅力。对不起，我的第一个答案，我太累了，想不到工作10小时后（现在是在法国晚上11点;-)） – Samuel 2009-11-19 21:49:13

用CSS只显示圆形指示器

回答

相关问题