用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只顯示圓形指示器

回答

相關問題