6
我正在爲iPhone和Android瀏覽器開發一個項目，這需要我構建一個類似溫度計的進度表，它可以對瀏覽器大小進行調整並輕鬆地更改進度。它需要儘可能地像設計一樣。也就是說，它需要花哨的漸變，插圖突出顯示和邊框。使用CSS構建複雜形狀
儀表：
通知白色插圖陰影和邊界
的進展應該延伸到圓形部分，以及繼續有奇特的效果。
我繼續有一個粗略的原型工作（在Chrome測試）http://jsfiddle.net/xduQ9/3/
html,
body {
padding: 25px;
}
.circle {
margin-left: -6px;
width: 48px;
height: 48px;
border-radius: 25px 25px 25px 24px;
border: solid rgba(178, 181, 188, 0.8) 1px;
box-shadow: inset 1px 2px 0 #fff, inset 1px -2px 0 #fff, inset -2px 0 0 #fff, inset -2px -2px 0 #fff, inset 0 3px 0 rgba(255, 255, 255, 0.35), -20px -20px 0 #fff, 20px -20px 0 #fff, 20px 20px 0 #fff, -20px 20px 0 #fff;
}
.circle-wrap {
overflow: hidden;
width: 48px;
height: 51px;
position: absolute;
right: 0;
}
.wrap {
display: -webkit-box;
width: 100%;
position: relative;
height: 51px;
overflow: hidden;
}
.progress {
position: absolute;
z-index: 0;
height: 100%;
width: 70%;
background: url("http://dl.dropbox.com/u/905197/white-stripe-diagonal.png"), -webkit-linear-gradient(top, rgba(183, 237, 21, 1) 0%, rgba(140, 186, 24, 1) 28%, rgba(78, 126, 11, 1) 65%, rgba(59, 86, 0, 1) 99%);
}
.meter.complete .progress {
width: 100%;
-webkit-animation: progress-slide 0.6s linear infinite;
}
@-webkit-keyframes progress-slide {
0% {
background-position: 0 0;
}
100% {
background-position: 25px 25px;
}
}
.progress-cover {
position: absolute;
top: 19px;
width: 70%;
height: 12px;
border-radius: 9px 0 0 9px;
border: solid #70901b 1px;
border-right: 0;
z-index: 2;
}
.top-mask {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 18px;
padding-left: 45px;
margin-left: -45px;
background: white;
border-bottom: solid #b2b5bc 1px;
border-radius: 0 0 33px 0;
box-shadow: 1px 2px 0 #fff, 0 3px 0 rgba(255, 255, 255, 0.35);
}
.bottom-mask {
position: absolute;
bottom: 0;
box-sizing: border-box;
width: 100%;
height: 17px;
padding-left: 45px;
margin-left: -45px;
background: white;
border-top: solid #b2b5bc 1px;
border-radius: 0 19px 0 0;
box-shadow: 1px -2px 0 #fff;
}
.inner {
position: absolute;
top: 0;
left: 2px;
width: 3px;
height: 12px;
border: solid 3px #fff;
border-right: none;
border-radius: 5px 0 0 5px;
}
.meter {
position: relative;
}
.left-border {
position: absolute;
top: 17px;
left: -4px;
width: 10px;
height: 16px;
border-radius: 12px 0 0 12px;
border: solid 1px #b2b5bc;
border-right: none;
z-index: 3;
}<div class="meter complete">
<!-- Remove .complete to stop animation -->
<div class="left-border">
<div class="inner"></div>
</div>
<div class="wrap">
<div class="progress"></div>
<div class="top-mask"></div>
<div class="bottom-mask"></div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
</div>
</div>的技術基本上剪輯有條紋綠色背景與圓角的幾個div的矩形直到出現所需的形狀。然後，我使用一束陰影來添加填充和米周圍的插圖。
我的問題：你會怎麼做？我的意思是，我可以稍微優化這個解決方案。我可以添加更多標記來使設計恰到好處，但它感覺太髒了。我有一種感覺，跨瀏覽器測試並不容易。我想過使用畫布，但如果瀏覽器調整大小，必須重新繪製形狀，這很糟糕。
我想避免儘可能地使用圖片，但如果一個優雅的解決方案是可能的，我一定會使用它。
儘管能夠更改進度條的顏色並不是實現的要求，但我想要一個具有該能力的解決方案。
更新撥弄'-moz-'廠商Firefox的前綴。它看起來不如在Chrome中：http://jsfiddle.net/xduQ9/8/ – 2012-03-18 11:10:52