CSS样式边框插入或者GROOVE看起来非常不同，从IE9 FF4或Safari5或Chrome2 [英] CSS borders style INSET or GROOVE look very different from IE9 FF4 or Safari5 or Chrome2

问题描述

对不起，作为一个傻子，而是试图获得一定槽效应或嵌入效果的边框样式时，我得到了一些非常，非常大的不同的结果直观地从不同的浏览器。

Sorry for being a nitwit, but I am getting some really, very big different outcomes visually from the various browsers when trying to get a certain groove effect or inset effect as border style.

使用时

{
    border: 5px groove #A00;
}

或

{
    border: 5px inset #A00;
}

Firefox的3.6 / 4.0的外观是一个是什么，我需要什么，我认为这是一个正确的凹槽或INSET渲染。所有的人气色好不同。接近固体或OUTSET。显然，没有真正的precise定义，哪一种使一个令人惊讶的一方在浏览器开发商给每一个自己际$ P $什么INSET和凹槽造型确实ptation。

The Firefox 3.6/4.0 look is the one that is what I need and what I think is a correct GROOVE or INSET rendering. All the others look awfully different. Close to SOLID or OUTSET. Apparently there is no real precise definition, which kind of makes it a surprising party for the developers at the browsers to give each their own interpretation of what INSET and GROOVE styling does.

有什么办法，我可以获取当前可笑的差异来匹配对我的一个深思熟虑的设计，看起来可能会以同样的方式在各大浏览器？

我不害怕使用一些其他创意CSS3的东西，如果我只知道什么或如何可能被继续使用。
所以任何想法，欢迎和code特别了。

I am not afraid of using some other creative CSS3 stuff if I only know what or how that could be used then. So any ideas are welcome and code especially too.

推荐答案

火狐/ WebKit的/ IE / Opera都看在他们提供的模式方面给我一致 - 即在左边框的外较暗的颜色和边界之上，对右边框和下边框外面较浅的颜色。

Firefox/Webkit/IE/Opera all look consistent to me in terms of the pattern they render - that is, a darker color on the outside of border-left and border-top, and a lighter color on the outside of border-right and border-bottom.

实际的颜色似乎每个浏览器的不同，虽然。从你的例子：

The actual colors do seem to differ per browser though. From your example:

歌剧结果
较暗：＃7f0000; RGB（127,0,0）结果
打火机：＃c04141; RGB（192,65,65）

Opera
Darker: #7f0000; rgb(127,0,0)
Lighter: #c04141; rgb(192,65,65)

火狐结果
较暗：＃770000; RGB（119,0,0）结果
打火机：＃d47f7f; RGB（212127127）

Firefox
Darker: #770000; rgb(119,0,0)
Lighter: #d47f7f; rgb(212,127,127)

的Webkit 结果
较暗：＃560000; RGB（86,0,0）结果
打火机：＃AA0000; RGB（170,0,0）

Webkit
Darker: #560000; rgb(86,0,0)
Lighter: #aa0000; rgb(170,0,0)

IE8 结果
较暗：＃2e0303; RGB（46,3,3）结果
打火机：＃b80d0c; RGB（184,13,12）

IE8
Darker: #2e0303; rgb(46,3,3)
Lighter: #b80d0c; rgb(184,13,12)

颜色比清楚，Webkit的人似乎是唯一合乎逻辑的 - 指定颜色较亮，而双为暗一点的RGB值

The color ratios are clear and the Webkit one seems to be the only logical one - the specified color for the lighter one, and double the RGB value for the darker one.

其余的是完全不同的，但图案是至少相同。

The others are quite different, but the pattern is at least the same.

这篇关于CSS样式边框插入或者GROOVE看起来非常不同，从IE9 FF4或Safari5或Chrome2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！