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

从规范(强调我的):

为'凹槽','脊','插入'和'开始'的值绘制的边框颜色取决于元素的边框颜色属性,但UA可以选择自己的算法来计算使用的实际颜色.例如,如果'border-color'的值为'silver',那么UA可以使用从白色到深灰色的渐变颜色来表示倾斜的边框.

因此,没有"正确"的边界着色方式.这取决于浏览器供应商他们希望他们的浏览器如何遮蔽边框.

所以,回答这个问题:

有没有什么方法可以让我目前荒谬的差异与我在主流浏览器中看起来相同的一个深思熟虑的设计相匹配？

我想border-color如果你需要细粒度的控制,你可以自己嵌套元素并自己玩多个边框设置.但是,对于初学者来说,让这些边界变得坚固.