CSS边框样式镶嵌或凹槽看起来与IE9 FF4或Safari5或Chrome2非常不同

很抱歉我是个白痴，但当我试图获得某种groove效果或inset效果作为边框样式时，我从不同的浏览器中获得了一些非常非常不同的视觉效果

使用时

{
    border: 5px groove #A00;
}

或

Firefox 3.6/4.0的外观正是我所需要的，我认为这是一个正确的GROOVE或INSET渲染。其他的看起来都大不相同。接近于固体或固体。显然，没有真正精确的定义，这使得浏览器的开发人员对INSET和GROOVE样式的作用给出各自的解释，这是一个令人惊讶的聚会

我有没有办法让目前荒谬的差异与我精心设计的一款在主流浏览器中看起来相同的设计相匹配？

我不害怕使用其他创造性的CSS3材料，如果我只知道可以使用什么或如何使用的话。 因此，欢迎任何想法，尤其是代码。

来自（我的重点）：

为“groove”、“ridge”、“inset”和“Start”值绘制的边框颜色取决于元素的边界颜色属性，但UAs可以选择自己的算法计算实际使用的颜色。例如，如果“边框颜色”的值为“银色”，则UA可以使用从白色到深灰色的颜色渐变来指示倾斜的边框

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

因此，为了回答这个问题：

我有没有办法让目前荒谬的差异与我精心设计的一款在主流浏览器中看起来相同的设计相匹配？

---

我想如果您需要细粒度的控制，您可以自己嵌套元素并使用多个边框的

边框颜色

设置。不过，对于初学者来说，请将这些边框设置为实心。

Firefox/Webkit/IE/Opera在它们呈现的图案上看起来都是一致的，即，边框左侧和边框顶部外侧的颜色较深，边框右侧和边框底部外侧的颜色较浅

不过，每个浏览器的实际颜色似乎有所不同。从你的例子来看：

歌剧
深色：7f0000；rgb（127,0,0）
打火机：#c04141；rgb（192,65,65）

Firefox
深色：770000；rgb（119,0,0）
打火机：#d47f7f；rgb（2127127）

Webkit
深色：56万；rgb（86,0,0）
打火机：#aa0000；rgb（170,0,0）

IE8
颜色较深：#2E003；rgb（46,3,3）
打火机：#b80d0c；rgb（184,13,12）

颜色比例是清晰的，Webkit一款似乎是唯一符合逻辑的一款——颜色较浅的是指定的颜色，颜色较深的是RGB值的两倍

---

其他的是完全不同的，但是模式至少是相同的。

< P>我知道你已经接受了答案，但是考虑使用“大纲”属性。

---

已经在SO上讨论过了，为什么不添加一些屏幕截图呢？chrome（在48版上测试）计算脊线和凹槽边框时出错设置黑色时，它们看起来像实心边框。

{
    border: 5px inset #A00;
}