Firefox边界半径渲染问题

Question

似乎Firefox（32,35,36）在渲染边框半径时添加了一个精细的灰色角：

这也是一个非常简单的测试：http://jsfiddle.net/imehesz/5ete1ctp/

.abox {
width:100px;
height:100px;
background-color: red;
border-left-color: rgb(0, 255, 87);
border-left-style: solid;
border-left-width: 10px;
border-right-color: rgb(0, 255, 87);
border-right-style: solid;
border-right-width: 10px;
border-bottom-color: rgb(0, 255, 87);
border-bottom-style: solid;
border-bottom-width: 10px;
border-top-color: rgb(0, 255, 87);
border-top-style: solid;
border-top-width: 10px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;    

-moz-box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;
-webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255),0 0 0 0 rgb(127, 127, 127) inset;
box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;
}

如果我删除background-color或box-shadow，则可行。但就我而言，我需要那些。

有什么方法可以解决这个问题吗？ （我没有看到有人在网上报道此问题！？）

Answer 1

你看到的是盒子阴影。如果你移除阴影，那么＆＃34;细灰色的角落[s]＆＃34;消失。

Firefox（38.0.5）：

---

Chome（43.0.2357.81米）：

＆＃13;

＆＃13;

.abox {
    width:100px;
    height:100px;
    background-color: red;
    border: 10px solid rgb(0,255,87);
    border-radius: 20px;
}
.abox:first-child {
-moz-box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;
-webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255),0 0 0 0 rgb(127, 127, 127) inset;
box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;  
  }

＆＃13;

With shadow:
<div class="abox"></div>

Without shadow:
<div class="abox"></div>

＆＃13;

＆＃13;

＆＃13;