CSS 边框样式 INSET 或 GROOVE 看起来与 IE9 FF4 或 Safari5 或 Chrome2 非常不同

Question

很抱歉我是个笨蛋，但当我试图获得某种凹槽效果或嵌入效果作为边框样式时，我从各种浏览器中获得了一些非常非常不同的视觉结果。

使用时

{
    border: 5px groove #A00;
}

或

{
    border: 5px inset #A00;
}

Firefox 3.6/4.0 外观正是我所需要的，也是我认为正确的 GROOVE 或 INSET 渲染。所有其他人看起来都大不相同。接近 SOLID 或 OUTSET。显然没有真正准确的定义，这让浏览器的开发人员感到惊讶，他们对 INSET 和 GROOVE 样式的作用给出了自己的解释。

有什么办法可以让目前荒谬的差异与我的一个深思熟虑的设计相匹配，这种设计在主流浏览器中看起来可能是一样的？

我不害怕使用其他一些有创意的 CSS3 东西，只要我当时知道可以使用什么或如何使用它们。 所以欢迎任何想法，尤其是代码。

Answer 1

来自spec (强调我的):

The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used. For instance, if the 'border-color' has the value 'silver', then a UA could use a gradient of colors from white to dark gray to indicate a sloping border.

因此没有“正确”的边界着色方法。这取决于浏览器供应商他们希望他们的浏览器如何遮蔽边框。

所以，作为对这个问题的回答:

Is there any way I could get the currently ridiculous differences to match up towards one well thought design of mine that might look the same way in the major browsers?

我想如果您需要细粒度控制，您可以自己嵌套元素并使用多个边框的 border-color 设置。不过，对于初学者来说，让这些边界变得牢固。