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