如何在css3和jquery中为进度条添加边框

Question

使用了CSS技巧中的进度条代码。无法在进度条上添加边框而不会使其看起来更糟。

我在这里使用了CSS技巧中的进度条形码

我对原始代码进行了几次更改以获得类似于这样的东西

http://dl.dropbox.com/u/8743819/reducedtestcase/ProgressBars/custombar.html

1. 计价器

请注意，标记（完成）的部分已完成。请看这里的演示。

• 我试着给计价器加上边框

工作要求1、2和3。

1. 这是你的完整应用程序吗

不。我做了一个简化的测试用例，在不影响问题陈述的情况下，我删除了尽可能多的不必要的代码来解释我的问题。

1. 我在css tricks上交叉发布了同样的问题。来这里收集更多的注意力来解决我的问题

最终解决方案作为演示的一部分发布在这里。

Answer 1

我试着在span中添加一个边框宽度：2px，正如您所提到的，然后扩展到父div。但如果你用身高来解释这一点，看起来还可以。请看下面。

将父div height设置为24px。米{高度：24px；}

将跨度高度设置为20px，而不是100%设置为高度。米

要固定宽度，请将父divs padding设置为。仪表{padding:0px 5px 0px 0px；}

我肯定这不是正确的方法，但看起来还可以。

总结

。米{高度：24px；填充：0px 5px 0px 0px；}

。米

Answer 2

如果理解您的问题，您可以为此使用CSS box大小属性。这样写：

.meter > span{
 border:2px solid red;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
}

欲知更多，请阅读本文http://css-tricks.com/box-sizing/