很抱歉这是一个傻瓜，但是当我试图获得某种凹槽效果或嵌入效果作为边框样式时，我在视觉上从各种浏览器中获得了一些非常非常大的不同结果。
使用时
{
border: 5px groove #A00;
}
或
{
border: 5px inset #A00;
}
Firefox 3.6 / 4.0外观是我需要的，我认为是正确的GROOVE或INSET渲染。所有其他人看起来非常不同。接近SOLID或OUTSET。显然没有真正精确的定义，这使得它成为浏览器开发人员的一个令人惊讶的派对，让他们自己解释INSET和GROOVE样式的作用。
有没有什么方法可以让目前荒谬的差异与我在主流浏览器中看起来相同的一个精心设计的设计相匹配？
如果我只知道可以使用什么或如何使用，我不怕使用其他一些创意CSS3的东西。 所以任何想法都是受欢迎的，特别是代码。
答案 0 :(得分：6)
来自spec（强调我的）：
为'凹槽'，'脊'，'插图'和'开始'的值绘制的边框颜色取决于元素的边框颜色属性，但UAs可以选择自己的算法来计算实际颜色使用即可。例如，如果'border-color'的值为'silver'，那么UA可以使用从白色到深灰色的渐变颜色来表示倾斜的边框。
因此没有“正确”的边框着色方式。这取决于浏览器供应商他们希望他们的浏览器如何遮蔽边框。
所以，回答这个问题：
有没有什么方法可以让目前荒谬的差异与我在主流浏览器中看起来相同的一个精心设计的设计相匹配？
如果你需要细粒度的控制，我想你可以自己嵌套元素并自己玩多个边框'border-color设置。但是，对于初学者来说，要使这些边界牢固。
答案 1 :(得分：3)
Firefox / Webkit / IE / Opera在渲染模式方面对我来说都是一致的 - 也就是说，边框左边和边框顶部的颜色较深，边框外边的颜色较浅 - 正确和边界底部。
但是每个浏览器的实际颜色确实不同。从你的例子：
<强>戏
更黑暗：＃7f0000; RGB（127,0,0）
打火机：＃c04141; RGB（192,65,65）
<强>火狐
更黑暗：＃770000; RGB（119,0,0）
打火机：＃d47f7f; RGB（212127127）
<强>的Webkit
更黑暗：＃560000; RGB（86,0,0）
打火机：＃aa0000; RGB（170,0,0）
<强> IE8
更黑：＃2e0303; RGB（46,3,3）
打火机：＃b80d0c; RGB（184,13,12）
颜色比率很明显，Webkit似乎是唯一合理的颜色 - 较轻的颜色指定的颜色，而较暗的颜色比率则是RGB值的两倍。
其他的完全不同，但模式至少是相同的。
答案 2 :(得分：1)