CSS Groove边框的浏览器兼容性问题

Question

我遇到使用goove边框的问题，因为它在其中一个浏览器（Firefox）中看起来与其他浏览器非常不同，并且根据W3规范并不多：

  

w3.org ：＆＃34;看起来好像是在画布上雕刻的。 （这通常是实现的   通过从两种略微更轻的颜色创建“阴影”   比'border-color'更暗。）＆＃34;

Firefox版本绝对不是＆＃34;略有＆＃34;更轻，并在黑暗的背景下导致问题。

有没有技巧或技巧来解决这个问题，让它看起来更接近中间的铬版本？

Answer 1

您可以使用具有元素边框一半的伪元素来模拟效果 和相反的颜色排列

.a {
    border: 60px groove #233232;
    width: 100px;
    height: 100px;
}

.b {
    border: solid 60px #233232;
    border-top-color: red;
    border-left-color: red;
    width: 100px;
    height: 100px;
    position: relative;
    left: 300px;
    top: -220px;
}

.b:after {
    content: '';
    position: absolute;
    left: -30px;
    top: -30px;
    width: 100%;
    height: 100%;
    border: solid 30px #233232;
    border-bottom-color: red;
    border-right-color: red;
}

demo

我为演示选择了红色，使其更加醒目。但是当然你可以把它设置成你想要的任何东西